/* ============================================================
   TRIPLEFOUR — DESIGN TOKENS  (single source of truth)
   Aesthetic: Bold editorial dark · electric-blue accent
   Every section MUST consume these variables — never hardcode
   colors, fonts, or raw spacing values.
   ============================================================ */

:root {
  /* ---- Core canvas ---- */
  --bg:            #0A0A0B;   /* page background (near black) */
  --bg-1:          #0E0E10;   /* alt band */
  --surface:       #141416;   /* raised panel / card */
  --surface-2:     #1B1B1F;   /* hovered / deeper card */
  --surface-3:     #232328;   /* chips, inputs */
  --surface-4:     #34343A;   /* scrollbar thumb hover / brightened surface */
  --surface-shimmer: rgba(255, 255, 255, 0.06); /* subtle light edge on dark panels */

  /* ---- Text ---- */
  --text:          #F4F4F0;   /* primary, warm off-white */
  --text-dim:      #A6A6A2;   /* secondary copy */
  --text-faint:    #8E8E89;   /* tertiary / captions — AA: ~6:1 on --bg, ~5.6:1 on --surface */
  --text-on-accent:#0A0A0B;   /* text sitting on accent fills */

  /* ---- Accent (electric blue) ---- */
  --accent:        #3D7BFF;
  --accent-bright: #6098FF;
  --accent-deep:   #2659E0;
  --accent-soft:   rgba(61, 123, 255, 0.14);
  --accent-hover:  rgba(61, 123, 255, 0.22);
  --accent-line:   rgba(61, 123, 255, 0.40);
  --accent-glow:   rgba(61, 123, 255, 0.55);
  /* secondary ambient hue (used ONLY in glows / gradients) */
  --violet:        #8B5CF6;
  --violet-glow:   rgba(139, 92, 246, 0.40);

  /* ---- Decorative / mockup palette (used inside the project showcase mockups) ---- */
  --warm-accent:     #FABE64;  /* warm wood tone — Adorefurnix mockup */
  --warm-deep:       #C88C3C;  /* deeper wood tone */
  --chrome-dot-red:   rgba(255, 97, 97, 0.55);  /* browser-chrome traffic lights */
  --chrome-dot-amber: rgba(255, 193, 64, 0.45);
  --chrome-dot-green: rgba(42, 200, 130, 0.45);

  /* ---- WhatsApp brand (chat integration — keep the official green for recognizability) ---- */
  --wa:       #25D366;
  --wa-dark:  #1EBE5D;
  --wa-deep:  #128C7E;
  --wa-glow:  rgba(37, 211, 102, 0.45);

  /* ---- Lines & borders ---- */
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);
  --line-faint:    rgba(255, 255, 255, 0.05);

  /* ---- Typography families ---- */
  --font-display:  "Anton", "Arial Narrow", sans-serif;   /* giant editorial type, UPPERCASE */
  --font-sans:     "Space Grotesk", system-ui, -apple-system, sans-serif; /* headings, UI, body */
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* eyebrows, labels, numbers */

  /* ---- Fluid type scale (clamp: min, vw, max) ---- */
  --fs-display:    clamp(3.5rem, 11vw, 12rem);    /* hero monolith word */
  --fs-h1:         clamp(2.75rem, 7.5vw, 7rem);   /* major section titles */
  --fs-h2:         clamp(2rem, 4.4vw, 3.75rem);
  --fs-h3:         clamp(1.4rem, 2.4vw, 2.1rem);
  --fs-h4:         clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead:       clamp(1.1rem, 1.55vw, 1.4rem);  /* intro paragraphs */
  --fs-body:       clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:      0.875rem;
  --fs-label:      0.75rem;   /* mono eyebrows / tags */

  /* ---- Spacing scale (8px base) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* fluid vertical rhythm for section padding */
  --section-y:    clamp(5rem, 11vw, 11rem);
  --section-y-sm: clamp(3.5rem, 7vw, 6rem);

  /* ---- Layout ---- */
  --container:      1320px;
  --container-wide: 1560px;
  --gutter:         clamp(1.25rem, 5vw, 5rem);
  --header-h:       76px;

  /* ---- Radii ---- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---- Shadows / elevation ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 14px 40px rgba(0,0,0,0.45);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.55);
  --shadow-accent: 0 18px 60px rgba(61,123,255,0.28);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   0.25s;
  --dur:        0.45s;
  --dur-slow:   0.8s;

  /* ---- z-index ---- */
  --z-base:    1;
  --z-raised:  10;
  --z-header:  100;
  --z-overlay: 1000;

  color-scheme: dark;
}