/* V2 AI Design System — Colors & Type tokens
   Source: V2 Services - Web EVO.fig (Web-Oct-25, Typography page, Footer, Navigation)
   Primary typeface: Outfit (Google Fonts)
*/

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@400;500;700&display=swap");

:root {
  /* ——————————————————————————————————————————
     BRAND COLORS — from Figma metadata (usage-ranked)
     ————————————————————————————————————————— */

  /* Core brand */
  --v2-yellow:         #FFC000;  /* Primary brand, hero & CTA frames (rgb 255,192,0) */
  --v2-yellow-bright:  #FEC415;  /* Hero gradient variant (254,196,21) */
  --v2-yellow-2:       #FEC40E;  /* (254,196,14) */
  --v2-yellow-amber:   #FECC4D;  /* (255,204,77) */
  --v2-yellow-soft:    #FFF3CF;  /* (255,243,207) tint */

  --v2-black:          #000000;  /* Primary bg, type on yellow */
  --v2-ink:            #1A1818;  /* near-black (26,24,24) */
  --v2-ink-2:          #292F33;  /* cool charcoal (41,47,51) */
  --v2-ink-wine:       #13050C;  /* (19,5,12) */
  --v2-white:          #FFFFFF;

  /* Service accent system (from "Our Services" cards) */
  --svc-align:   #F1325F;  /* ALIGN — magenta/pink */
  --svc-align-2: #DB455B;  /* pink-red variant used on case-study cards */
  --svc-align-soft: #2D0F13; /* deep wine bg for case-study */
  --svc-enable: #2BBF4A;  /* ENABLE — green */
  --svc-enable-2:#15962D;
  --svc-scale:  #36BAF4;  /* SCALE — cyan/blue */
  --svc-scale-2:#38C2FF;
  --svc-scale-3:#7FD6FF;  /* light accent */
  --svc-scale-soft:#072533; /* deep navy bg for case-study */
  --svc-secure: #FF8C00;  /* SECURE — orange */
  --svc-secure-2:#FF7602;
  --svc-secure-3:#FE9B01;
  --svc-secure-soft:#342804; /* deep brown bg for case-study */

  /* Neutrals */
  --gray-100: #F5F5F5;
  --gray-200: #EBEBEB;
  --gray-300: #DCDCDC;
  --gray-400: #D9D9D9;
  --gray-500: #BDBDBD;
  --gray-600: #BFBFBF;  /* text on dark */
  --gray-700: #666666;  /* body mute */
  --surface-cool: #E1E8ED; /* subtle blue-grey */

  /* Semantic */
  --fg-1: var(--v2-black);       /* primary text on light */
  --fg-2: var(--gray-700);       /* secondary text on light */
  --fg-on-yellow: var(--v2-black);
  --fg-on-dark: var(--v2-white);
  --fg-on-dark-2: var(--gray-400);
  --fg-on-dark-mute: #BFBFBF;

  --bg-primary: var(--v2-white);
  --bg-inverse: var(--v2-black);
  --bg-accent:  var(--v2-yellow);
  --bg-muted:   var(--gray-200);
  --bg-texture: #EBEBEB;  /* cement/paper texture base */

  --border-default: rgba(0,0,0,0.12);
  --border-strong:  var(--v2-black);
  --border-on-dark: var(--v2-white);
  --divider-on-dark: rgba(255,255,255,0.2);

  /* Shadows */
  --shadow-soft:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-card:   0 8px 24px rgba(0,0,0,0.12);
  --shadow-card-dark: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-focus-yellow: 0 0 0 3px rgba(255,192,0,0.35);

  /* Radii */
  --radius-card: 10px;
  --radius-sm: 4px;
  --radius-none: 0;

  /* Spacing scale — V2 uses 8pt base with hero gaps at 80, 100, 120 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 50px;
  --space-9: 80px;
  --space-10: 120px;

  /* Layout */
  --max-content: 1196px;  /* V2's 1196 fixed content column */
  --outer-pad: 266px;     /* marginal gutter to content column on 1728 frame */

  /* ——————————————————————————————————————————
     TYPOGRAPHY — primary: Outfit
     Scale derived from Typography-base frame + usage counts
     ————————————————————————————————————————— */
  --font-sans: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Outfit", system-ui, sans-serif;  /* same family, different weights */
  --font-alt: "Montserrat", system-ui, sans-serif;  /* secondary, rare */

  /* Weights actually used across the file */
  --w-thin: 100;
  --w-extralight: 200;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Type scale (px) — from Figma "Typography base" frame */
  --fs-display: 80px;    /* hero section titles ("Why V2 AI", "Our Services") */
  --fs-display-2: 65px;  /* hero headline */
  --fs-h1: 51px;
  --fs-h2: 44px;
  --fs-h3: 36px;
  --fs-h4: 30px;
  --fs-lead: 26px;
  --fs-body-lg: 22px;
  --fs-body: 20px;
  --fs-body-sm: 18px;
  --fs-small: 16px;
  --fs-xs: 14px;
  --fs-nav: 15.5px;      /* UPPERCASE nav / buttons */

  --lh-tight: 1;         /* display, hero — V2 uses 100% line-height on display */
  --lh-snug: 1.15;
  --lh-normal: 1.3;
  --lh-body: 1.4;

  --ls-tight: -0.03em;
  --ls-wide: 0.04em;     /* used on UPPERCASE nav labels */
}

/* ——————————————————————————————————————————
   SEMANTIC ELEMENTS
   ————————————————————————————————————————— */
.v2-display, h1.v2-display {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h1, .v2-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .v2-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .v2-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  line-height: 1.22;
  color: var(--fg-1);
  margin: 0;
}

h4, .v2-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0;
}

.v2-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: currentColor;
}

.v2-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}

p, .v2-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--fg-1);
}

.v2-body-lg { font-size: var(--fs-body-lg); line-height: 1.3; }
.v2-body-sm { font-size: var(--fs-body-sm); line-height: 1.35; }
.v2-small   { font-size: var(--fs-small); line-height: 1.3; }
.v2-xs      { font-size: var(--fs-xs);    line-height: 1.3; }

.v2-nav-label {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-body-sm);
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

a, .v2-link {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { opacity: 0.75; }