/* ODYSS design tokens — colors & type
 * Source: Odyss.fig (Page-1 / Couleurs, App, Un article) + brand notes.
 * All variables live on :root so they can be overridden per-surface.
 */

/* ------------------------------------------------------------------ */
/*  WEBFONTS                                                           */
/* ------------------------------------------------------------------ */
/* Open Sans (126×), Manrope (34×), Roboto (33×) per Figma metadata.  */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap");

:root {
  /* ==================================================================
     COLORS — Primaires (from brand brief + Couleurs frame)
     ================================================================== */
  --ody-teal:        #56A3A6;   /* Primary — teal */
  --ody-lime:        #9CEC58;   /* Accent 1 — vert lime */
  --ody-navy:        #1A365D;   /* Accent 2 — bleu marine (main text/ui) */
  --ody-orange:      #F0B44B;   /* Accent 3 — orange/gold (badges) */
  --ody-violet:      #DEC0F1;   /* Accent 4 — violet */
  --ody-bordeaux:    #AD343E;   /* Accent 5 — bordeaux */

  /* Extended brand palette drawn from the Couleurs frame + metadata */
  --ody-navy-deep:   #083961;   /* darker navy used for body text */
  --ody-navy-ink:    #021B2B;   /* near-black heading ink */
  --ody-slate:       #2D3142;   /* charcoal / secondary surface */
  --ody-slate-ink:   #1C3E54;
  --ody-orange-warm: #F08A4B;   /* warm orange (logo gradient end) */
  --ody-orange-soft: #F79256;
  --ody-yellow:      #F2E86D;   /* logo gradient start */
  --ody-amber:       #FFB81C;
  --ody-lime-soft:   #6EFB99;
  --ody-mint:        #7ADFA2;
  --ody-green:       #00A86B;
  --ody-sky:         #21BDF4;   /* bright blue cta */
  --ody-sky-soft:    #ECFAFF;
  --ody-periwinkle:  #C5CBEB;   /* lavender blue used in illustrations */
  --ody-lilac:       #ADB2D3;
  --ody-rose:        #DB6E7E;

  /* Neutrals / surfaces */
  --ody-bg:          #F7F5F2;   /* app canvas — warm off-white */
  --ody-bg-alt:      #FBFAF8;
  --ody-surface:     #FFFFFF;
  --ody-surface-2:   #E7E9EF;   /* band headers / subtle fills */
  --ody-divider:     #D1D7DF;
  --ody-muted:       #A0A6BE;   /* meta / timestamps */
  --ody-muted-2:     #4D6879;

  /* Text — semantic */
  --fg-1:            var(--ody-navy-ink);  /* strongest */
  --fg-2:            var(--ody-navy);       /* default body on light */
  --fg-3:            var(--ody-muted-2);    /* muted body / secondary */
  --fg-4:            var(--ody-muted);      /* timestamps, captions */
  --fg-inverse:      #F9F9F8;
  --fg-on-navy:      #ECFAFF;               /* text on navy bars */

  /* Semantic UI */
  --brand-primary:   var(--ody-navy);
  --brand-secondary: var(--ody-teal);
  --brand-accent:    var(--ody-lime);
  --brand-warning:   var(--ody-orange);
  --brand-danger:    var(--ody-bordeaux);
  --brand-info:      var(--ody-sky);
  --brand-success:   var(--ody-green);

  /* Shadows — matches Figma rgba(0,0,0,.08–.25) */
  --shadow-card:     0 1px 18px 0 rgba(0, 0, 0, 0.10);
  --shadow-float:    0 8px 14px 0 rgba(0, 0, 0, 0.25);
  --shadow-inset:    0 -6px 20px 0 rgba(0, 0, 0, 0.08);
  --shadow-subtle:   0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Radii — pulled from Figma (16/24/30/50 are the common ones) */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 30px;
  --r-pill: 50px;
  --r-full: 9999px;

  /* Spacing scale — 4px base */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;

  /* ==================================================================
     TYPE — Three families (see Figma metadata)
     Open Sans — copy / articles (default)
     Manrope    — UI titles, numbers, logos
     Roboto     — data labels, stat figures, timestamps
     ================================================================== */
  /* Modern site-vitrine pairing (2026 refresh, inspired by logo geometry). */
  --font-display:  "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;
  --font-ui:       "Inter", system-ui, -apple-system, sans-serif;
  /* Legacy in-app pairings preserved for the mobile UI kit. */
  --font-app-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-app-body:    "Open Sans", system-ui, -apple-system, sans-serif;
  --font-app-ui:      "Roboto", system-ui, -apple-system, sans-serif;

  /* Base sizes — mobile-first, matches Figma token sizes */
  --t-display:  32px;
  --t-h1:       24px;
  --t-h2:       20px;
  --t-h3:       16px;
  --t-body:     14px;
  --t-body-sm:  12px;
  --t-caption:  11px;
  --t-article:  12px;  /* Figma long-form body was 12/17 */

  /* Line-heights pulled from Figma */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* Letter-spacing */
  --ls-logo:    0.168em;  /* ODYSS wordmark */
  --ls-title:   0.5px;
  --ls-ui:      0.15px;
  --ls-caption: 0.5px;
}

/* ------------------------------------------------------------------ */
/*  SEMANTIC TYPE STYLES — use via class or element                   */
/* ------------------------------------------------------------------ */
.ody-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: var(--ls-logo);
  color: var(--ody-navy);
  text-transform: uppercase;
}

.ody-display,
h1.ody {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-snug);
  letter-spacing: 0.5px;
  color: var(--fg-1);
}

.ody-h1, h2.ody {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.2;
  letter-spacing: var(--ls-title);
  color: var(--fg-2);
}

.ody-h2, h3.ody {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.25;
  letter-spacing: var(--ls-ui);
  color: var(--ody-navy-ink);
}

.ody-h3, h4.ody {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: var(--ls-ui);
  color: var(--ody-navy);
}

.ody-body, p.ody {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  letter-spacing: 0.25px;
  color: var(--fg-2);
}

.ody-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: 1.42;
  letter-spacing: var(--ls-ui);
  color: var(--fg-3);
}

.ody-article {
  font-family: var(--font-body);
  font-size: var(--t-article);
  line-height: 17px;
  letter-spacing: var(--ls-ui);
  color: var(--ody-slate);
}

.ody-caption {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 16px;
  letter-spacing: var(--ls-caption);
  color: var(--fg-4);
  text-transform: none;
}

.ody-stat {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--ls-ui);
}

.ody-button-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: var(--ls-ui);
  text-align: center;
}

.ody-event-chip {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
}