/* ==========================================================================
   LOBO & COMPANY — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius and layout.
   Change a value here and it updates everywhere.

   Two layers:
   1. Primitives  (--blue-500, --gold-500…)  raw palette, don't use directly
                                             in components if a semantic
                                             token exists.
   2. Semantic    (--color-text, --color-primary…)  what components use.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COLOR PRIMITIVES
     Base values come from the Bricks/Core Framework staging palette.
     Scale: 100 (lightest) → 500 (brand) → 900 (darkest)
     ------------------------------------------------------------------------ */

  /* Blue — primary brand */
  --blue-100: #c8cce4;
  --blue-200: #929cc8;
  --blue-300: #5b6eae;
  --blue-500: #0a4492;
  --blue-700: #14336b;
  --blue-800: #152447;
  --blue-850: #18213a;       /* dark navy used behind "Who it's for" blocks */
  --blue-900: #111627;

  /* Cyan */
  --cyan-100: #d0e9ec;
  --cyan-200: #a0d4da;
  --cyan-300: #66bdc7;
  --cyan-500: #00a7b5;
  --cyan-700: #197d86;
  --cyan-800: #1a5056;
  --cyan-900: #152b2d;

  /* Gold */
  --gold-100: #ffebcc;
  --gold-200: #ffd494;
  --gold-300: #ffc261;
  --gold-500: #ffa400;
  --gold-700: #bb7a11;
  --gold-800: #7a5015;
  --gold-900: #3c2910;

  /* Purple */
  --purple-100: #d5c8e0;
  --purple-200: #ab91c0;
  --purple-300: #825da2;
  --purple-500: #582c83;
  --purple-700: #432361;
  --purple-800: #2f1b41;
  --purple-900: #1a1122;

  /* Green */
  --green-100: #e3efc8;
  --green-200: #c4de91;
  --green-300: #a5ce5a;
  --green-500: #84bd00;
  --green-700: #638c12;
  --green-800: #435b15;
  --green-900: #232d10;

  --pink-500: #e6007e;       /* only as fallback under texture-pink */

  /* Neutrals */
  --white: #ffffff;
  --gray-100: #f2f2f2;       /* the one light gray: section and card backgrounds */
  --gray-300: #d9d9d9;
  --gray-500: #9b9b9b;
  --gray-700: #555555;
  --ink: #1b1b1e;            /* near-black: nav, header buttons, image placeholders */
  --black: #000000;
  --scene-dark: #050302;     /* darkest tone of the footer's office photo: footer top and closing CTA */
  --slate-500: #37577c;      /* muted blue used for small labels */

  /* ------------------------------------------------------------------------
     2. SEMANTIC COLORS
     ------------------------------------------------------------------------ */
  --color-bg: var(--white);

  --color-text: var(--blue-900);
  --color-text-strong: var(--black);   /* secondary/small text: pure black for legibility (Mike, 27-sep-2026) */
  --color-heading: var(--blue-900);
  --color-label: var(--slate-500);

  --color-primary: var(--blue-500);
  --color-primary-dark: var(--blue-700);
  --color-border: var(--gray-300);
  --color-focus: var(--blue-500);

  /* On dark backgrounds: secondary text and divider lines. Text never goes
     below 80% white so it stays easy to read on phones (Mike, 8-oct-2026). */
  --on-dark-text: rgb(255 255 255 / 0.8);
  --on-dark-line-soft: rgb(255 255 255 / 0.1);
  --on-dark-line: rgb(255 255 255 / 0.2);
  --on-dark-line-strong: rgb(255 255 255 / 0.6);

  /* Service accent colors (left bar on each service block) */
  --service-branding: var(--blue-500);
  --service-digital: var(--cyan-500);
  --service-design: var(--green-500);
  --service-web: var(--purple-500);

  /* ------------------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --font-display: "Clash Grotesk", "Arial", sans-serif;   /* headings */
  --font-body: "Inter Display", "Arial", sans-serif;      /* everything else */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Fixed sizes (8-oct-2026): the same on every screen. Buttons, labels,
     notes and text inside cards. The number is the size in pixels.
     Nothing on the site goes below 12; running text never below 16. */
  --text-12: 0.75rem;     /* fine print, footer legal, tiny labels */
  --text-14: 0.875rem;    /* uppercase labels, nav, notes, small buttons */
  --text-16: 1rem;        /* text inside cards and lists, buttons, form fields */
  --text-18: 1.125rem;    /* secondary lead paragraphs */
  --text-20: 1.25rem;     /* lead paragraphs under a title, small card titles */
  --text-24: 1.5rem;      /* card titles */

  /* Fluid sizes: grow with the screen (360px → 1400px). Body text and titles. */
  --text-m: clamp(1.06rem, 0.29vw + 1rem, 1.25rem);
  --text-l: clamp(1.27rem, 0.44vw + 1.18rem, 1.56rem);
  --text-xl: clamp(1.53rem, 0.65vw + 1.38rem, 1.95rem);
  --text-2xl: clamp(1.84rem, 0.93vw + 1.63rem, 2.44rem);
  --text-3xl: clamp(2.2rem, 1.31vw + 1.91rem, 3.05rem);
  --text-4xl: clamp(2.64rem, 1.8vw + 2.24rem, 3.81rem);
  --text-5xl: clamp(2.75rem, 1.83rem + 3.7vw, 4.75rem);   /* 44 → 76: big section titles */
  --text-6xl: clamp(3rem, 2.19rem + 3.3vw, 5.5rem);       /* 48 → 88: display titles */
  --text-7xl: clamp(3rem, 1.75rem + 4.5vw, 6.5rem);       /* 48 → 104: page titles (H1) */
  --text-stat: clamp(2.5rem, 5.2vw, 5rem);                /* big figures (20+, 350+…) */

  /* Line height. Titles use the first four, running text the last two. */
  --leading-none: 1;         /* uppercase display titles */
  --leading-tight: 1.05;     /* large titles */
  --leading-compact: 1.1;    /* medium titles */
  --leading-snug: 1.2;       /* small titles, labels, buttons */
  --leading-cozy: 1.3;       /* card titles, short lines */
  --leading-normal: 1.45;    /* large text (20px and up) */
  --leading-relaxed: 1.6;    /* running text */

  /* Letter spacing */
  --tracking-tight: -0.02em;   /* big sentence-case titles */
  --tracking-caps: 0.01em;     /* big uppercase titles */
  --tracking-ui: 0.03em;       /* buttons, nav and small links */
  --tracking-wide: 0.08em;     /* eyebrow labels */
  --tracking-wider: 0.14em;    /* small uppercase labels */
  --tracking-widest: 0.18em;   /* tiny uppercase tags */

  /* ------------------------------------------------------------------------
     4. SPACING (fluid)
     ------------------------------------------------------------------------ */
  --space-3xs: clamp(0.3rem, 0.15vw + 0.26rem, 0.4rem);
  --space-2xs: clamp(0.44rem, 0.23vw + 0.39rem, 0.59rem);
  --space-xs: clamp(0.67rem, 0.34vw + 0.59rem, 0.89rem);
  --space-s: clamp(1rem, 0.51vw + 0.88rem, 1.33rem);
  --space-m: clamp(1.5rem, 0.77vw + 1.33rem, 2rem);
  --space-l: clamp(2.25rem, 1.15vw + 1.99rem, 3rem);
  --space-xl: clamp(3.38rem, 1.73vw + 2.99rem, 4.5rem);
  --space-2xl: clamp(5.06rem, 2.6vw + 4.48rem, 6.75rem);
  --space-3xl: clamp(7.59rem, 3.89vw + 6.72rem, 10.13rem);

  /* Space above and below a section (8-oct-2026): 64px on phones and
     tablets, up to 108px on desktop. Compact sections use --space-xl. */
  --space-section: clamp(4rem, 7.5vw, 6.75rem);

  /* ------------------------------------------------------------------------
     5. LAYOUT, RADIUS, SHADOW, Z-INDEX
     ------------------------------------------------------------------------ */
  /* Layout grid: 12 columns inside the container. Content spans whole
     columns (e.g. 4 / 6 / 8 / 12) so every section shares the same lines. */
  --container-max: 1680px;
  --grid-columns: 12;
  --grid-margin: clamp(24px, 2.65vw, 48px);   /* space outside the grid */
  --grid-gap: clamp(16px, 1.4vw, 24px);       /* space between columns */
  --container-gutter: var(--grid-margin);

  /* Visible guide lines (.grid-lines): one line every 2 columns → 6 bands */
  --grid-line-color: rgb(17 22 39 / 0.1);
  --grid-line-bands: 6;

  --header-offset: 140px;          /* space the fixed header needs on top */

  --radius-s: 7px;
  --radius-m: 12px;
  /* Square corners on images and cards so they sit flush with the grid
     lines (Mike, 5-oct-2026; before: card 20px, media 17px). */
  --radius-card: 0;
  --radius-media: 0;
  --radius-review: 20px;   /* homepage review cards: off the main grid, stay rounded */
  --radius-pill: 999px;

  --shadow-s: 0 8px 24px rgb(0 0 0 / 0.12);
  --shadow-m: 0 18px 42px rgb(0 0 0 / 0.25);

  --z-header-blur: 90;                    /* under the header, over the page */
  --z-header: 100;
  --z-menu: 110;
  --z-skip: 200;

  --header-blur-height: 96px;             /* progressive blur strip at the top of the screen */

  /* ------------------------------------------------------------------------
     6. HEADER GLASS & MOTION (approved by Mike, 1-oct-2026)
     The nav pill is frosted glass: a tinted translucent fill + backdrop blur.
     Dark version sits over dark sections / the hero, light over light ones.
     ------------------------------------------------------------------------ */
  --glass-blur: 36px;
  --glass-dark-bg: rgb(27 27 30 / 0.5);       /* --ink at 50% */
  --glass-dark-border: rgb(255 255 255 / 0.16);
  --glass-light-bg: rgb(255 255 255 / 0.5);
  --glass-light-border: rgb(27 27 30 / 0.08);

  --ease-roll: cubic-bezier(0.76, 0, 0.24, 1);   /* easeInOutQuart */
  --dur-roll: 0.5s;                              /* rolling letters, header slide */
  --dur-menu: 0.4s;                              /* dropdown fade + dash */
  --stagger-roll: 15ms;                          /* delay between letters */
}