/* =====================================================================
   SORS — Colors & Type foundations
   Source of truth: SORS-Website (Webflow export) + brand palette file.
   Heading font: Ubuntu · Body font: Source Sans 3 (both self-hosted)
   ===================================================================== */

/* ---- Self-hosted fonts ---- */
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-Light.ttf") format("truetype");  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-Italic.ttf") format("truetype");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-Medium.ttf") format("truetype");  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-Bold.ttf") format("truetype");    font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-VariableFont_wght.ttf") format("truetype"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 200 900; font-style: italic; font-display: swap; }
/* All brand fonts are self-hosted above — no CDN needed for Ubuntu or Source Sans 3. */

:root {
  /* ============ BRAND PALETTE (from Color palette.txt) ============ */
  --sors-french-blue:    #183883; /* deep navy — secondary brand, borders, logo mark */
  --sors-fresh-sky:      #1ca3e4; /* PRIMARY accent — CTAs, highlights, glow */
  --sors-white:          #ffffff;
  --sors-platinum:       #e9eef0; /* cool light neutral — light surfaces */
  --sors-jungle:         #4b9a47; /* success / positive */
  --sors-gold:           #ffb01f; /* warning / attention (Orange) */
  --sors-scarlet:        #c21e1e; /* error / decline / negative (Mahogany Red) */

  /* ============ SURFACES (dark, space theme) ============ */
  --sors-bg:             #050b19; /* primary app/site background (near-black navy) */
  --sors-bg-deep:        #000000; /* hero gradient top */
  --sors-bg-elevated:    #0a1428; /* raised panel on dark */
  --sors-hairline:       #0c1c42; /* body outline / faint navy border */
  --sors-card-border:    rgba(28,163,228,.45); /* sky border on glowing cards */

  /* ============ LIGHT THEME (Snowflake-style bright surfaces) ============ */
  --sors-light:          #ffffff; /* primary light surface */
  --sors-light-2:        #f3f7fb; /* alt light section (cool) */
  --sors-light-3:        #e9eef0; /* platinum panel */
  --sors-ink:            #0d1b3e; /* deep navy ink — primary text on light */
  --sors-ink-2:          #41506e; /* secondary text on light */
  --sors-ink-3:          #6c7a93; /* muted text on light */
  --sors-light-border:   #dbe6f0; /* hairline divider on light */
  --sors-sky-tint:       #e8f6fd; /* faint sky wash for chips/panels */
  --sors-sky-deep:       #0d8fcf; /* darker sky for hover/contrast on light */
  --grad-sky:            linear-gradient(120deg, #1ca3e4 0%, #4fc3f0 50%, #183883 100%); /* @kind color */ /* signature blue gradient */

  /* ============ FOREGROUND / TEXT ============ */
  --sors-fg:             #fbf9f9; /* near-white primary text (neutral-01) */
  --sors-fg-2:           rgba(255,255,255,.78); /* secondary text (#ffffffc7) */
  --sors-fg-3:           rgba(255,255,255,.68); /* tertiary / captions */
  --sors-fg-muted:       rgba(255,255,255,.45);
  --sors-on-light:       #0e0f11; /* text on light surfaces */
  --sors-on-light-2:     #636b75; /* muted text on light */

  /* ============ TYPOGRAPHY ============ */
  --font-heading: "Ubuntu", Helvetica, sans-serif;
  --font-body:    "Source Sans 3", system-ui, sans-serif;

  --fs-display: 80px;
  --fs-h1: 72px;
  --fs-h2: 48px;
  --fs-h3: 40px;
  --fs-h4: 32px;
  --fs-h5: 24px;
  --fs-body-lg: 24px;  /* body-02 */
  --fs-body:    20px;  /* body-01 */
  --fs-body-sm: 16px;  /* body-03 */
  --fs-caption: 14px;  /* body-04 */

  --fw-light: 300 /* @kind font */; --fw-normal: 400 /* @kind font */; --fw-medium: 500 /* @kind font */; --fw-semibold: 600 /* @kind font */; --fw-bold: 700 /* @kind font */;

  --lh-s: 110%; --lh-m: 116%; --lh-l: 120%; --lh-xl: 125%; --lh-2xl: 133%; --lh-3xl: 140%;
  --ls-xl: -.03em; --ls-l: -.025em; --ls-m: -.02em; --ls-s: -.005em;

  /* ============ RADII ============ */
  --r-sm: 8px; --r-md: 16px; --r-lg: 20px; --r-card: 7px; --r-pill: 100px;

  /* ============ SPACING / GAPS ============ */
  --sp-1: 8px;  --sp-2: 10px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 60px;
  --sp-11: 72px; --sp-12: 100px;

  /* ============ ELEVATION / GLOW (signature) ============ */
  --glow-sky:   0 0 6px #1ca3e4;            /* tight card/badge glow */
  --glow-sky-l: 0 0 24px rgba(28,163,228,.55); /* larger emphasis glow */
  --shadow-soft: 0 12px 40px rgba(0,0,0,.45);
}

/* ============ SEMANTIC TYPE CLASSES ============ */
.sors-display { font-family: var(--font-heading); font-size: var(--fs-display); font-weight: var(--fw-medium); line-height: var(--lh-l); letter-spacing: var(--ls-xl); color: var(--sors-fg); }
.sors-h1 { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: var(--lh-l); letter-spacing: var(--ls-xl); color: var(--sors-fg); }
.sors-h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-m); letter-spacing: var(--ls-l); color: var(--sors-fg); }
.sors-h3 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-s); letter-spacing: var(--ls-m); color: var(--sors-fg); }
.sors-h4 { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-xl); letter-spacing: var(--ls-m); color: var(--sors-fg); }
.sors-h5 { font-family: var(--font-heading); font-size: var(--fs-h5); font-weight: var(--fw-medium); line-height: var(--lh-2xl); letter-spacing: var(--ls-s); color: var(--sors-fg); }
.sors-body-lg { font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: var(--fw-normal); line-height: var(--lh-3xl); color: var(--sors-fg-2); }
.sors-body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-normal); line-height: var(--lh-3xl); color: var(--sors-fg-2); }
.sors-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-normal); line-height: var(--lh-3xl); color: var(--sors-fg-2); }
.sors-caption { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-normal); line-height: var(--lh-3xl); color: var(--sors-fg-3); }

/* Sky-gradient highlight applied to a text span (signature treatment) */
.sors-highlight {
  color: var(--sors-fresh-sky);
  background: linear-gradient(#1ca3e4, #1ca3e4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}