/* ============================================================================
   PANPRUKSA DESIGN TOKENS
   ---------------------------------------------------------------------------
   Single source of truth for the Panpruksa visual system.
   Loaded BEFORE styles.css. Semantic tokens here; aliases in styles.css.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------
     COLOR — 3 neutrals + 1 accent, plus surface/ink semantic layers.
     --------------------------------------------------------------------- */

  /* Brand palette (raw) */
  --pp-ink:            #000000;   /* primary text, primary borders */
  --pp-ink-deep:       #1A1A1A;   /* dark surfaces (values/footer) */
  --pp-ink-muted:      #666666;   /* secondary text */
  --pp-surface:        #F0EFED;   /* warm-cream page background */
  --pp-surface-alt:    #FFFFFF;   /* card / contrast surface */
  --pp-warm-200:       #E8E8E8;   /* hairlines, light dividers */
  --pp-warm-300:       #CBCBCB;   /* form borders, subtle borders */
  --pp-accent:         #B87333;   /* copper — sole accent */

  /* Semantic color tokens (use these in components) */
  --color-text:            var(--pp-ink);
  --color-text-muted:      var(--pp-ink-muted);
  --color-text-inverse:    var(--pp-surface-alt);
  --color-bg:              var(--pp-surface);
  --color-bg-alt:          var(--pp-surface-alt);
  --color-bg-inverse:      var(--pp-ink-deep);
  --color-border:          var(--pp-warm-300);
  --color-border-soft:     var(--pp-warm-200);
  --color-accent:          var(--pp-accent);

  /* Status (form feedback) */
  --color-success:         #2d7d46;
  --color-error:           #c0392b;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — serif display + sans body, fluid clamp scale.
     --------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-text:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  --weight-thin:    200;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* Fluid type scale (min, fluid, max) */
  --text-display-1: clamp(3rem,   7vw,   6.5rem);   /* hero h1 */
  --text-display-2: clamp(2rem,   4.5vw, 4.5rem);   /* section h2 */
  --text-h3:        clamp(1.5rem, 3vw,   3rem);
  --text-h4:        clamp(1.25rem,2vw,   2rem);
  --text-lead:      clamp(1.2rem, 1.5vw, 1.5rem);
  --text-body:      clamp(1rem,   1.2vw, 1.25rem);
  --text-sm:        0.9rem;
  --text-xs:        0.75rem;
  --text-2xs:       0.65rem;

  --leading-tight: 1.15;
  --leading-snug:  1.4;
  --leading-body:  1.7;

  --tracking-tight: 0.02em;
  --tracking-label: 0.15em;
  --tracking-wide:  0.2em;
  --tracking-extra: 0.25em;

  /* ---------------------------------------------------------------------
     SPACING — 8pt scale + fluid section/page rhythm.
     --------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-12: 6rem;      /* 96 */
  --space-16: 8rem;      /* 128 */

  /* Fluid rhythm */
  --space-page-x:    clamp(1.5rem, 4vw, 4rem);     /* container left/right */
  --space-section-y: clamp(4rem,   8vw, 8rem);     /* section top/bottom */
  --space-intro-y:   clamp(5rem,   10vw, 10rem);   /* intro section pad */
  --space-grid-gap:  clamp(2rem,   4vw, 4rem);
  --space-grid-gap-sm: clamp(1.5rem, 3vw, 3rem);

  /* ---------------------------------------------------------------------
     LAYOUT — container widths, z-index layers.
     --------------------------------------------------------------------- */
  --container-max:    1400px;
  --container-narrow: 900px;

  --z-base:    1;
  --z-header:  1000;
  --z-nav:     999;
  --z-toggle:  1001;
  --z-overlay: 1100;

  /* ---------------------------------------------------------------------
     MOTION — duration + easing tokens. All tied to --transition.
     --------------------------------------------------------------------- */
  --duration-instant: 0.15s;
  --duration-fast:    0.3s;
  --duration-base:    0.4s;
  --duration-slow:    0.6s;
  --duration-xslow:   0.8s;

  --ease-out:   cubic-bezier(0.25, 0.1, 0.25, 1);   /* default — calm exit */
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --transition:        all var(--duration-base) var(--ease-out);
  --transition-fast:   all var(--duration-fast) var(--ease-out);

  /* ---------------------------------------------------------------------
     SHADOW + RADIUS — reserved (system uses flat surfaces today).
     --------------------------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-full: 9999px;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.05);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.12);
}

/* Reduced-motion: collapse transitions but keep colors/layout intact. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast:    0.01ms;
    --duration-base:    0.01ms;
    --duration-slow:    0.01ms;
    --duration-xslow:   0.01ms;
    --transition:       none;
    --transition-fast:  none;
  }
}