/* =============================================================
   tokens.css — Design tokens for Outline Department
   Warm organic palette — 2026 edition
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     Colors — warm organic palette
     ----------------------------------------------------------- */

  --color-bg:              #F0EEE9;
  --color-bg-elevated:     #FFFFFF;
  --color-bg-secondary:    #EFE8E0;
  --color-bg-tertiary:     #E5DDD3;

  --color-label:           #1A1614;
  --color-label-2:         #4A3F38;
  --color-label-3:         #7A6B62;
  --color-label-4:         #9E8C82;

  --color-separator:        rgba(100, 78, 60, 0.12);
  --color-separator-opaque: #D4C8BC;

  --color-accent:          #A85C3A;
  --color-accent-hover:    #8F4B2D;
  --color-accent-strong:   #C4714A;
  --color-accent-subtle:   rgba(168, 92, 58, 0.08);

  --color-fill:            rgba(100, 78, 60, 0.08);
  --color-fill-2:          rgba(100, 78, 60, 0.05);


  /* -----------------------------------------------------------
     Navigation — Liquid Glass Warm
     ----------------------------------------------------------- */

  --nav-bg:      rgba(240, 238, 233, 0.78);
  --nav-blur:    blur(20px) saturate(160%);
  --nav-height:  54px;
  --nav-border:  rgba(100, 78, 60, 0.10);


  /* -----------------------------------------------------------
     Typography — families
     ----------------------------------------------------------- */

  --font-display: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --font-system:  -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;


  /* -----------------------------------------------------------
     Typography — scale (fluid clamp)
     ----------------------------------------------------------- */

  --text-display: clamp(48px, 8vw, 96px);
  --text-h1:      clamp(34px, 5vw, 60px);
  --text-h2:      clamp(24px, 3.5vw, 40px);
  --text-h3:      clamp(18px, 2.5vw, 26px);
  --text-lg:      clamp(16px, 1.6vw, 19px);
  --text-base:    16px;
  --text-sm:      14px;
  --text-xs:      12px;
  --text-2xs:     11px;


  /* -----------------------------------------------------------
     Typography — leading
     ----------------------------------------------------------- */

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.65;
  --leading-relaxed: 1.75;


  /* -----------------------------------------------------------
     Typography — tracking
     ----------------------------------------------------------- */

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  -0.01em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.09em;


  /* -----------------------------------------------------------
     Spacing — 8px grid
     ----------------------------------------------------------- */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;


  /* -----------------------------------------------------------
     Border radius
     ----------------------------------------------------------- */

  --radius-xs:    6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-2xl:  40px;
  --radius-full: 9999px;


  /* -----------------------------------------------------------
     Shadows — warm tinted double-layer
     ----------------------------------------------------------- */

  --shadow-xs:         0 1px 2px rgba(26, 22, 20, 0.04);
  --shadow-sm:         0 1px 3px rgba(26, 22, 20, 0.05), 0 4px 14px rgba(26, 22, 20, 0.07);
  --shadow-md:         0 2px 8px rgba(26, 22, 20, 0.06), 0 10px 30px rgba(26, 22, 20, 0.10);
  --shadow-lg:         0 4px 16px rgba(26, 22, 20, 0.07), 0 24px 60px rgba(26, 22, 20, 0.13);
  --shadow-card:       0 1px 2px rgba(26, 22, 20, 0.04), 0 8px 24px rgba(26, 22, 20, 0.08);
  --shadow-card-hover: 0 6px 16px rgba(26, 22, 20, 0.07), 0 24px 56px rgba(26, 22, 20, 0.14);


  /* -----------------------------------------------------------
     Easing
     ----------------------------------------------------------- */

  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle:  cubic-bezier(0.25, 0.1, 0.25, 1);


  /* -----------------------------------------------------------
     Duration
     ----------------------------------------------------------- */

  --duration-fast:    150ms;
  --duration-base:    260ms;
  --duration-slow:    420ms;
  --duration-reveal:  700ms;


  /* -----------------------------------------------------------
     Layout containers
     ----------------------------------------------------------- */

  --container:        min(1280px, 90vw);
  --container-narrow: min(680px, 90vw);
  --container-wide:   min(1440px, 92vw);

}