/* ============================================================
   OakbrookOne — Design System Foundations
   Colours + Typography
   Source of truth: OakbrookOne Brand Pack V1.0 (Oakbrook marketing)
   Implementation reference: Lovable export (src/styles.css)
   Font decision: GT Walsheim Pro (group consistency; overrides
   brand-pack page 15's Manrope per CLAUDE.md).
   ============================================================ */

/* ---------- Webfonts: GT Walsheim Pro ---------- */
@font-face {
  font-family: "GT Walsheim";
  src: url("/fonts/GTWalsheim-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  src: url("/fonts/GTWalsheimPro-Regular.ttf") format("truetype"),
       url("/fonts/GTWalsheim-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  src: url("/fonts/GTWalsheim-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  src: url("/fonts/GTWalsheim-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim";
  src: url("/fonts/GTWalsheim-Black.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     PRIMARY COLOURS (Brand Pack — Brand Colours)
     ============================================================ */
  --ob1-cyan:    #3CC4F4;  /* Primary 01 — main CTA + accent */
  --ob1-navy:    #090B43;  /* Primary 03 — text + dark surfaces */
  --ob1-magenta: #FD24F2;  /* Primary 04 — promotional accent */
  --ob1-violet:  #7B5BFF;  /* gradient mid-stop (implementation) */

  /* Primary 02 — brand gradient (magenta → violet → cyan) */
  --ob1-gradient: linear-gradient(135deg, #FD24F2 0%, #7B5BFF 50%, #3CC4F4 100%);

  /* CTA (cyan) interaction states */
  --ob1-cyan-hover: #1FB1E6;

  /* Navy surface scale */
  --ob1-navy-deep:    #06082F;  /* footer / deepest panels */
  --ob1-navy-surface: #16183A;  /* raised dark surfaces (stat bands) */

  /* ============================================================
     GRAYSCALE (Brand Pack — Grayscale Colours, 8 named tokens)
     ============================================================ */
  --ob1-cloud:    #EDEFF7;  /* 01 — lightest tint / section wash */
  --ob1-smoke:    #D3D6E0;  /* 02 */
  --ob1-steel:    #BCBFCC;  /* 03 */
  --ob1-space:    #9DA2B3;  /* 04 */
  --ob1-graphite: #6E7180;  /* 05 — muted body text */
  --ob1-arsenic:  #40424D;  /* 06 */
  --ob1-phantom:  #1E1E24;  /* 07 */
  --ob1-black:    #000000;  /* 08 */

  --ob1-offwhite: #FCFCFE;  /* page background (implementation default) */
  --ob1-white:    #FFFFFF;

  /* ============================================================
     SEMANTIC TOKENS (map brand → UI roles)
     ============================================================ */
  --bg:            var(--ob1-offwhite);
  --bg-dark:       var(--ob1-navy);
  --surface:       var(--ob1-white);   /* cards */
  --surface-wash:  var(--ob1-cloud);   /* lavender section backgrounds */

  --fg:            var(--ob1-navy);    /* primary text on light */
  --fg-muted:      var(--ob1-graphite);/* secondary text on light */
  --fg-on-dark:    rgba(255,255,255,0.92);
  --fg-on-dark-muted: rgba(255,255,255,0.72);

  --accent:        var(--ob1-magenta); /* "text-violet" accent in headlines */
  --cta:           var(--ob1-cyan);    /* primary action button */
  --cta-hover:     var(--ob1-cyan-hover);
  --cta-fg:        var(--ob1-white);

  --border:        #E6E8F2;
  --border-dark:   rgba(255,255,255,0.12);
  --ring:          var(--ob1-cyan);

  --eyebrow:       var(--ob1-cyan);    /* uppercase eyebrow labels */
  --success:       #00B67A;            /* Trustpilot green */

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: "GT Walsheim", "GT Walsheim Pro", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);

  /* Weights */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;
  --w-black: 800;

  /* Type scale (rem) — display heavy, tight tracking on headings */
  --t-display: clamp(2.75rem, 5vw, 4.5rem);  /* hero h1 */
  --t-h1: clamp(2.25rem, 4vw, 3.25rem);
  --t-h2: clamp(1.875rem, 3vw, 3rem);
  --t-h3: 1.5rem;
  --t-h4: 1.25rem;
  --t-lead: 1.125rem;     /* intro paragraphs */
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-eyebrow: 0.75rem;   /* uppercase tracking label */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  --tracking-tight: -0.025em;
  --tracking-eyebrow: 0.18em;

  /* ============================================================
     RADII / SHADOW / SPACING
     ============================================================ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;   /* default --radius 0.875rem */
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 10px 30px -18px rgba(9,11,67,0.20);
  --shadow-md: 0 20px 60px -30px rgba(9,11,67,0.35);
  --shadow-lg: 0 30px 80px -20px rgba(9,11,67,0.55);
  --shadow-cta: 0 10px 30px -10px rgba(60,196,244,0.6);
  --shadow-magenta-glow: 0 30px 80px -20px rgba(253,36,242,0.5);

  --space-section: clamp(5rem, 9vw, 7rem); /* py-20 → py-28 */
  --maxw: 1200px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
.ob1-body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.ob1-h1, .ob1-h2, .ob1-h3, .ob1-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.ob1-display { font-size: var(--t-display); line-height: var(--lh-tight); font-weight: var(--w-black); letter-spacing: var(--tracking-tight); }
.ob1-h1 { font-size: var(--t-h1); }
.ob1-h2 { font-size: var(--t-h2); }
.ob1-h3 { font-size: var(--t-h3); font-weight: var(--w-bold); }
.ob1-h4 { font-size: var(--t-h4); font-weight: var(--w-bold); }
.ob1-lead { font-size: var(--t-lead); line-height: var(--lh-body); color: var(--fg-muted); }
.ob1-body-text { font-size: var(--t-body); line-height: var(--lh-body); }
.ob1-small { font-size: var(--t-small); }
.ob1-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--eyebrow);
}
.ob1-accent { color: var(--accent); }