/* Object Edge Design System — Colors & Typography
   Source: OE Design System.fig (Colors-and-Typography page)
*/

:root {
  /* ────────────────────────────────────────────
     OE Blue Spectrum — primary brand
     Used in CTA buttons, text highlights, component backgrounds
     ──────────────────────────────────────────── */
  --oe-midnight: #00194D;     /* 0, 25, 77 */
  --oe-smalt:    #002F8C;     /* 0, 47, 140 */
  --oe-blue:     #004DE6;     /* 0, 77, 230 — signature OE blue (primary link/CTA) */
  --oe-cobalt:   #3377FF;     /* 51, 119, 255 */
  --oe-zircon:   #CCDDFF;     /* 204, 221, 255 */

  /* Grays — headings, body text, backgrounds */
  --oe-cod-gray:    #111111;  /* 17, 17, 17  — headings */
  --oe-mine-shaft:  #333333;  /* 51, 51, 51  — dark text */
  --oe-gray:        #808080;  /* 128, 128, 128 — secondary/meta */
  --oe-silver:      #BFBFBF;  /* 191, 191, 191 — input borders */
  --oe-silver-1:    #BABABA;
  --oe-mercury:     #E0E0E0;  /* 224, 224, 224 — dividers */
  --oe-concrete:    #F2F2F2;  /* 242, 242, 242 — section wash */
  --oe-alabaster:   #FAFAFA;  /* 250, 250, 250 — f-pattern bg */
  --oe-white:       #FFFFFF;
  --oe-dark-gray:   #404040;  /* 64, 64, 64 — blurb body copy */

  /* Support — used sparingly for accents, icons, tags */
  --oe-dark-orange:  #E64C00;
  --oe-orange:       #FF7733;
  --oe-light-orange: #FFDDCC;

  --oe-dark-mint:  #00E6AC;
  --oe-mint:       #00FFBF;
  --oe-light-mint: #CCFFF2;

  --oe-dark-aqua:  #00E6E6;
  --oe-aqua:       #33FFFF;
  --oe-light-aqua: #CCFFFF;

  --oe-dark-violet:  #8800CC;
  --oe-violet:       #BB33FF;
  --oe-light-violet: #EECCFF;

  --oe-dark-coral:  #E60099;
  --oe-coral:       #FF33BB;
  --oe-light-coral: #FFCCEE;

  /* ────────────────────────────────────────────
     Semantic tokens
     ──────────────────────────────────────────── */
  --fg-1: var(--oe-cod-gray);          /* primary text / headings */
  --fg-2: var(--oe-mine-shaft);        /* secondary text */
  --fg-3: var(--oe-dark-gray);         /* tertiary / blurb body */
  --fg-muted: var(--oe-gray);          /* meta / labels */
  --fg-link: var(--oe-blue);           /* links, CTA text */
  --fg-on-dark: var(--oe-white);

  --bg: var(--oe-white);
  --bg-section: var(--oe-alabaster);
  --bg-wash: var(--oe-concrete);
  --bg-dark: var(--oe-cod-gray);

  --border: var(--oe-mercury);
  --border-input: var(--oe-silver);
  --border-strong: var(--oe-mine-shaft);

  --accent: var(--oe-blue);
  --accent-hover: var(--oe-smalt);
  --accent-soft: var(--oe-zircon);

  /* ────────────────────────────────────────────
     Gradients
     Blue gradients → hero backgrounds
     Dark gradients → CTA backgrounds
     Light gradients → section / featured item bg
     ──────────────────────────────────────────── */
  --oe-gradient-hero: linear-gradient(135deg,
      rgba(0,47,140,0.7) 0%,
      rgb(0,77,230) 23%,
      rgb(51,119,255) 49%,
      rgba(51,255,255,0.8) 100%);
  --oe-gradient-hero-radial: radial-gradient(
      rgba(51,119,255,0.6) 0%,
      rgba(0,77,230,0.6) 69%,
      rgba(0,47,140,0.6) 100%);
  --oe-gradient-light-blue: linear-gradient(180deg,
      rgba(0,230,230,0.2) 0%,
      rgba(51,119,255,0.21) 41%,
      rgba(204,221,255,0.15) 100%);
  --oe-gradient-light-gray: linear-gradient(180deg, #F2F2F2 0%, #FFFFFF 100%);
  --oe-gradient-dark: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  --oe-gradient-icon: linear-gradient(135deg, #002F8C 0%, #004DE6 27%, #3377FF 55%, rgba(51,255,255,0.7) 100%);

  /* Shadows — used in featured items and blurbs */
  --shadow-card: 0 0 25px 25px rgba(0,0,0,0.02);      /* signature soft card glow */
  --shadow-thin: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-header: 0 0 30px 10px rgba(0,0,0,0.1);

  /* Radii */
  --radius-xs: 3px;    /* inputs */
  --radius-sm: 6px;    /* blurb cards */
  --radius-pill: 100px;/* buttons */

  /* Grid & Spacing — 1240 container, 8 columns, 15px gutter */
  --container-w: 1240px;
  --col-gutter: 15px;
  --section-pad: 100px;        /* top/bottom */
  --para-mb: 30px;
  --small-mb: 40px;

  /* ────────────────────────────────────────────
     Typography
     Roboto is the primary family (Light 300, Regular 400,
     Medium 500, SemiBold 600, Bold 700). DM Serif Display
     appears only in a few large display moments.
     ──────────────────────────────────────────── */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale — mapped to Figma headings 1-6 */
  --fs-h1:   82px;   /* home banner H1 — weight 300 */
  --fs-h2:   42px;   /* section H2 — weight 400, or 32/500 uppercase */
  --fs-h3:   32px;
  --fs-h4:   24px;
  --fs-h5:   20px;
  --fs-h6:   18px;
  --fs-p-lg: 18px;   /* lh 30 */
  --fs-p:    16px;   /* lh 28 */
  --fs-p-sm: 14px;   /* lh 24 */
  --fs-cap:  12px;   /* lh 16 */
  --fs-nav:  14px;   /* 12-14, letter-spacing 0.05-0.1em, uppercase */

  --lh-h1: 90px;
  --lh-h2: 50px;
  --lh-h3: 42px;
  --lh-p-lg: 30px;
  --lh-p: 28px;
  --lh-p-sm: 24px;
}

/* ────────────────────────────────────────────
   Semantic element defaults
   ──────────────────────────────────────────── */
body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); }

h1, .oe-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  margin: 0 0 20px;
  color: var(--fg-1);
}
h2, .oe-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0 0 20px;
  color: var(--fg-1);
}
.oe-h2--uppercase {
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: 42px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
h3, .oe-h3 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 16px; }
h4, .oe-h4 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: 32px; margin: 0 0 14px; }
h5, .oe-h5 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-h5); line-height: 28px; margin: 0 0 12px; }
h6, .oe-h6 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-h6); line-height: 26px; margin: 0 0 12px; }

p, .oe-p { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-p); line-height: var(--lh-p); margin: 0 0 20px; color: var(--fg-2); }
.oe-p-lg { font-size: var(--fs-p-lg); line-height: var(--lh-p-lg); }
.oe-p-sm { font-size: var(--fs-p-sm); line-height: var(--lh-p-sm); }

.oe-caption      { font-size: 12px; line-height: 16px; font-weight: 300; }
.oe-caption-up   { font-size: 14px; line-height: 20px; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; }
.oe-caption-large-up { font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.oe-eyebrow      { font-size: 14px; line-height: 26px; letter-spacing: 0.1em; color: var(--fg-muted); text-transform: capitalize; }

.oe-nav          { font-size: 12px; line-height: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.oe-nav--lg      { font-size: 14px; letter-spacing: 0.1em; }

.oe-blockquote-lg { font-size: 20px; line-height: 40px; font-weight: 300; font-style: italic; }
.oe-blockquote    { font-size: 18px; line-height: 32px; font-weight: 300; font-style: italic; }
.oe-blockquote-sm { font-size: 16px; line-height: 28px; font-weight: 300; font-style: italic; }

/* List marker — blue dot */
ul.oe-list { list-style: none; padding: 0; margin: 0; }
ul.oe-list li { position: relative; padding-left: 18px; margin: 5px 0; font-weight: 300; line-height: 24px; }
ul.oe-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--oe-blue);
}

/* Links */
a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--accent-hover); }