/* ==========================================================================
   Flambient Labs — Design tokens
   Direction: "Darkroom Editorial"
   Brand colors taken from the official logo SVGs.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     Brand — exact values from Logos/SVG Files
     --------------------------------------------------------------- */
  --terracotta: #C56A4B;
  --gold:       #D6B25E;
  --slate:      #4A6D8C;
  --ink:        #201E1D;
  --paper:      #F2F1EE;

  /* Terracotta ramp */
  --terracotta-100: #F1D9CF;
  --terracotta-200: #E7BEAC;
  --terracotta-300: #DDA389;
  --terracotta-400: #D28869;
  --terracotta-500: #C56A4B;
  --terracotta-600: #AC553A;
  --terracotta-700: #8C432D;
  --terracotta-900: #4A231A;

  /* Gold ramp */
  --gold-200: #ECD79E;
  --gold-300: #E3C77B;
  --gold-500: #D6B25E;
  --gold-600: #BC964A;
  --gold-700: #957338;

  /* Slate ramp */
  --slate-100: #D3DEE8;
  --slate-200: #B0C3D3;
  --slate-300: #8CA6BC;
  --slate-400: #688AA4;
  --slate-500: #4A6D8C;
  --slate-600: #3B5872;
  --slate-800: #21303E;
  --slate-900: #151F28;

  /* Darkroom neutrals — warm blacks, never pure */
  --void:       #0C0B0A;
  --ink-900:    #141211;
  --ink-800:    #201E1D;   /* brand ink — default page surface */
  --ink-700:    #2A2725;
  --ink-600:    #38342F;
  --ink-500:    #4A453E;

  /* Paper neutrals — warm, for light bands */
  --paper-000:  #FBFAF8;
  --paper-100:  #F2F1EE;   /* brand paper */
  --paper-200:  #E7E4DE;
  --paper-300:  #D8D3CA;
  --paper-400:  #B6AFA4;

  /* ---------------------------------------------------------------
     Semantic — dark canvas (default)
     --------------------------------------------------------------- */
  --bg:            var(--ink-800);
  --bg-deep:       var(--ink-900);
  --bg-raised:     var(--ink-700);
  --text:          var(--paper-100);
  --text-body:     #A9A6A1;   /* 6.95:1 on ink */
  --text-meta:     #98938C;   /* 5.49:1 on ink */
  --accent:        var(--terracotta-500);
  --accent-text:   var(--terracotta-300);  /* legible terracotta on dark */
  --hairline:      rgba(242, 241, 238, 0.11);
  --hairline-warm: rgba(214, 178, 94, 0.30);
  --surface:       rgba(242, 241, 238, 0.035);
  --surface-hi:    rgba(242, 241, 238, 0.06);

  /* Light band overrides applied by .band--paper */
  --on-paper-text:  var(--ink-800);
  --on-paper-body:  #5C5751;   /* 6.51:1 on paper */
  --on-paper-meta:  #6E6860;
  --on-paper-link:  var(--terracotta-700); /* 6.31:1 on paper */
  --on-paper-rule:  rgba(32, 30, 29, 0.14);

  /* Status */
  --success:  #7FA878;
  --danger:   #D9705F;

  /* ---------------------------------------------------------------
     Typography
     --------------------------------------------------------------- */
  --font-display: 'Petrona', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* Fluid display scale */
  --t-hero:    clamp(3.25rem, 9.2vw, 9rem);
  --t-display: clamp(2.5rem, 6vw, 5.25rem);
  --t-title:   clamp(2rem, 4.2vw, 3.5rem);
  --t-section: clamp(1.75rem, 3vw, 2.75rem);
  --t-h3:      clamp(1.1875rem, 1.7vw, 1.5rem);
  --t-h4:      1.0625rem;

  --t-lead:    clamp(1.0625rem, 1.25vw, 1.3125rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-sm:      0.9375rem;   /* 15px */
  --t-xs:      0.8125rem;   /* 13px */
  --t-meta:    0.6875rem;   /* 11px, always uppercase + tracked */

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-body:   1.62;

  --track-meta:  0.2em;
  --track-wide:  0.08em;

  /* ---------------------------------------------------------------
     Space — 4pt rhythm
     --------------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 11rem;

  --band-y:  clamp(4.5rem, 10vw, 11rem);
  --band-y-sm: clamp(3rem, 6vw, 6rem);

  /* ---------------------------------------------------------------
     Layout
     --------------------------------------------------------------- */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max-xl: 1560px;
  --max-lg: 1240px;
  --max-md: 900px;
  --max-sm: 520px;

  --radius: 2px;      /* editorial: almost square */
  --radius-lg: 3px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     Motion
     --------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 620ms;
  --dur-reveal: 950ms;

  /* Elevation — light, never heavy on dark */
  --shadow-img: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 24px 60px -32px rgba(0, 0, 0, 0.7);

  --z-nav: 100;
  --z-menu: 200;
}