/* ============================================================
   DESIGN TOKENS — Punam Katuwal Portfolio
   Palette: Warm White · Cloud White · Teal · Midnight
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --color-bg:             #F7F5F0;   /* Warm White — lighter, less yellow */
  --color-card:           #FEFEFE;   /* Pure White — card surfaces */
  --color-accent:         #2A8C8C;   /* Teal — vivid, focused */
  --color-accent-hover:   #1F6E6E;   /* Teal dark — hover states */
  --color-accent-subtle:  #D6E0E2;   /* Sky Blue — writing section bg ONLY */
  --color-text:           #162A2C;   /* Midnight — headings, primary text */
  --color-text-muted:     #686867;   /* Storm Cloud — secondary text, labels */
  --color-text-faint:     #9A9A99;   /* Storm Cloud light — very quiet labels */
  --color-text-inverse:   #FEFCF6;   /* On dark backgrounds */
  --color-bg-dark:        #162A2C;   /* Midnight — footer CTA band */
  --color-divider:        rgba(22, 42, 44, 0.08);
  --color-divider-sky:    #D6E0E2;

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  /* ── Type Scale ── */
  --text-hero:   64px;
  --text-3xl:    36px;
  --text-2xl:    32px;
  --text-xl:     22px;
  --text-lg:     20px;
  --text-md:     18px;
  --text-base:   16px;
  --text-sm:     15px;
  --text-ui:     14px;
  --text-xs:     13px;
  --text-xxs:    12px;
  --text-label:  11px;

  /* ── Line Heights ── */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-base:   1.75;
  --leading-loose:  1.85;

  /* ── Letter Spacing ── */
  --tracking-caps:   0.1em;
  --tracking-tight: -0.02em;
  --tracking-hero:  -0.03em;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 56px;
  --space-14: 64px;
  --space-16: 72px;
  --space-20: 96px;
  --space-24: 120px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-card:       0 2px 12px rgba(22, 42, 44, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(22, 42, 44, 0.10);
  --shadow-sm:         0 1px 4px rgba(22, 42, 44, 0.08);

  /* ── Easing ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --max-w:        1180px;
  --max-w-narrow: 760px;
  --gutter:       clamp(24px, 5vw, 80px);
  --nav-h:        64px;
}