/* ==========================================
   KARISHMA PORTFOLIO
   DESIGN TOKENS
========================================== */

:root {
  /* COLORS */
  --color-bg: #f6f0e5;
  --color-surface: #ede5d4;
  --color-surface-alt: #e2d8c2;
  --color-text: #1a130b;
  --color-text-soft: #3d2f1d;
  --color-text-muted: #5e4a31;
  --color-text-subtle: #806c53;
  --color-border: #cbbfa8;
  --color-accent: #8a3a00;
  --color-accent-hover: #733000;
  --color-success: #2e7d32;
  --color-warning: #d97706;
  --color-danger: #c62828;
  --color-illustration: #7d746b;
  --hero-visual-filter: sepia(0.18) saturate(0.85) brightness(0.98);

  /* TYPOGRAPHY */

  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-heading: Georgia, 'Times New Roman', Times, serif;
  --font-body:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
    sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Display */
  --fs-display-xl: clamp(4rem, 7vw, 5.5rem);
  --fs-display-lg: clamp(3rem, 5vw, 4.5rem);
  --fs-display-md: clamp(2.5rem, 4vw, 3.5rem);

  /* Headings */
  --fs-h1: clamp(2.25rem, 3vw, 3.25rem);
  --fs-h2: clamp(1.9rem, 2.4vw, 2.6rem);
  --fs-h3: clamp(1.35rem, 1.8vw, 1.65rem);

  /* Aliases for semantic components */
  --fs-heading-lg: var(--fs-h2);
  --fs-heading-md: var(--fs-h3);
  --fs-heading-sm: 1.125rem;

  /* Body */
  --fs-body-lg: 1.1875rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.875rem;

  /* Line heights */
  --lh-display: 1.12;
  --lh-heading: 1.25;
  --lh-subheading: 1.35;
  --lh-body: 1.8;
  --lh-compact: 1.5;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-label: 0.08em;

  /* Spacing between two lines */
  --title-block-height: calc(var(--fs-h3) * var(--lh-subheading) * 2);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 6rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  /* Containers */
  --container-sm: 768px;
  --container-md: 1024px;
  --container-lg: 1360px;
  --reading-width: 760px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='dark'] {
  --color-bg: #12100e;
  --color-surface: #1c1915;
  --color-surface-alt: #26221d;
  --color-text: #ebe3d5;
  --color-text-soft: #c6b8a3;
  --color-text-muted: #a09079;
  --color-text-subtle: #6e614e;
  --color-border: #2d2822;
  --color-accent: #eaa43a;
  --color-accent-hover: #f2b95a;
  --color-illustration: #b8aea3;
  --hero-visual-filter: sepia(0.18) saturate(0.85) brightness(0.98);
}