/* ============================================================
   KONCEPTO · DESIGN TOKENS
   Sampled from logos/logo_lime.png (#CBF24E) + Desktop/Mobile.png
   HARD RULES: never #000, never #FFF. Lime is the single hero color.
   ============================================================ */

:root {
  /* ---- BRAND COLOR ---- */
  --lime:        #CBF24E;   /* sampled true brand lime from logo */
  --lime-deep:   #A9D138;   /* pressed / shadow side of lime */
  --lime-ink:    #0A0E07;   /* dark text on lime (never #000) */

  /* ---- DARK CANVAS (off-black charcoal) ---- */
  --bg-0:    #0A0B0D;       /* deepest */
  --bg-1:    #0E0E11;       /* base background */
  --surface-1: #161618;     /* glass/metal card */
  --surface-2: #1C1C1F;
  --surface-3: #232327;
  --hairline:  rgba(244,244,245,0.10);
  --hairline-strong: rgba(244,244,245,0.16);

  /* ---- TEXT ON DARK ---- */
  --text:        #F4F4F5;   /* off-white, never #FFF */
  --text-dim:    #B9B9C0;
  --text-muted:  #9A9AA2;   /* AA-safe (~7:1 on charcoal) for small informational copy */

  /* ---- LIGHT SECTION (off-white, never #FFF) ---- */
  --light-bg:    #F4F4F2;
  --light-surface: #FBFBF9;
  --ink:         #121214;   /* dark text on light, near-black */
  --ink-dim:     #4A4A50;
  --light-hairline: rgba(18,18,20,0.12);

  /* ---- TYPE ---- */
  --font: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std",
          "Neue Haas Grotesk Text Pro", "NeueHaasDisplay", "Neue Haas Grotesk",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* fluid type scale — pruned to the live roles only:
     meta(14) · control/body(16) · body(18) · medium(24) · section title(section).
     The hero uses its own clamp (the giant exception). */
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-24: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  /* the single big size for EVERY section title */
  --fs-section: clamp(2.6rem, 1.2rem + 6vw, 7rem);

  --lh-tight: 0.98;
  --lh-snug:  1.08;
  --lh-body:  1.6;

  /* ---- SPACING (4/8/16/24/32/48/64/96/128) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;   --s-11: 10rem;

  --section-pad: clamp(4rem, 2rem + 8vw, 9rem);
  --shell: 1240px;
  --shell-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- RADII ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---- FLAT GLASS / METAL MATERIAL (no glow, no placed light) ----
     Depth = thin top/bottom edge + ONE restrained shadow + (blur for glass) */
  --edge-dark:
     inset 0 1px 0 rgba(244,244,245,0.07),
     inset 0 -1px 0 rgba(0,0,0,0.45);
  --edge-dark-strong:
     inset 0 1px 0 rgba(244,244,245,0.10),
     inset 0 -1px 0 rgba(0,0,0,0.55);
  --edge-light:
     inset 0 1px 0 rgba(244,244,242,0.6),
     inset 0 -1px 0 rgba(18,18,20,0.10);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,0.55);
  --shadow-3: 0 24px 60px -20px rgba(0,0,0,0.65);
  --shadow-light-1: 0 1px 2px rgba(18,18,20,0.06);
  --shadow-light-2: 0 18px 44px -22px rgba(18,18,20,0.22);

  /* ---- MOTION (custom easing, never linear) ---- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-overshoot:cubic-bezier(0.34, 1.56, 0.64, 1);   /* seat-into-place */
  --ease-inout:    cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --header-h: 76px;

  color-scheme: dark;
}