/* ============================================================
   SOI — Design Tokens
   Source of truth: approved Figma audit (§3.1–3.4) + SOI overrides.
   EXACT Figma values preserved — NOT normalized to a 4/8 scale.
   Base: 1rem = 16px.
   ============================================================ */

/* Font loading — multi-weight families used across the file.
   theme.json fontFamilies reference these same stacks. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;700;900&display=swap');

:root {
  /* === Colors === */
  /* All 14 from audit §3.1, semantic-brand names. #FFFFFF and #FCFCFB
     kept SEPARATE per user decision (no consolidation). */
  --color-primary: #fccb00;            /* brand yellow — primary CTA, title accent, commitens bg */
  --color-accent-blue: #00a0e9;        /* secondary CTA, footer bg, hero titles */
  --color-footer-bg: #00a0e9;          /* alias of accent-blue — footer surface */
  --color-section-green: #40915a;      /* section bg (key dates/fees/program/pub/about), read-more link */
  --color-stat-blue: #38b6ff;          /* stat numbers/labels, secondary CTA (hotel/submission) */
  --color-decorative-yellow: #ffed00;  /* decorative "SOI" letters, timeline dots, speaker disc */
  --color-text: #000000;               /* body text, section titles, button labels */
  --color-text-dark-navy: #041e41;     /* CTA-label text on yellow; overlay base hue */
  --color-surface: #ffffff;            /* nav bg, cards, text-inverse on dark */
  --color-surface-subtle: #fcfcfb;     /* schedule background (kept distinct from #fff) */
  --color-band-olive-light: #e6ebcb;   /* olive band: templates, fees footer, topics card 1 */
  --color-band-olive-mid: #bed28a;     /* topics card 2 */
  --color-neutral-100: #efeee9;        /* neutral pill bg */

  /* Composite overlays (explicit tokens) */
  --overlay-hero: rgba(4, 30, 65, 0.7);        /* navy 70% dim on hero photos */
  --color-stat-tile-bg: rgba(56, 182, 255, 0.2); /* venue stat-tile fill */

  /* Convenience aliases for inverse text on dark sections */
  --color-text-inverse: #ffffff;

  /* === Typography — families === */
  --font-family-sans: 'Nunito Sans', sans-serif;
  --font-family-serif: 'Tinos', 'Times New Roman', serif;     /* Tinos primary, Times fallback only */
  --font-family-display: 'Inter', sans-serif;                 /* decorative oversized "SOI" */

  /* === Typography — sizes ===
     Every distinct size from audit §3.2, largest → smallest. */
  --font-size-display-soi: 43.75rem;       /* 700px — decorative "SOI" brandmark */
  --font-size-display-128: 8rem;           /* 128px — minor decorative */
  --font-size-stat-number-100: 6.25rem;    /* 100px — venue stat numbers */
  --font-size-hero: 4.375rem;              /* 70px — section hero titles */
  --font-size-h1: 3.125rem;                /* 50px — HOMA h1 / LATEST NEWS / section h2-display */
  --font-size-h2: 3.125rem;                /* 50px — PAPER TEMPLATE / FEES / cancelation / schedule overview */
  --font-size-h3: 2.5rem;                  /* 40px — KEY DATES event titles + dates */
  --font-size-h4: 2rem;                    /* 32px — minor heading weight */
  --font-size-title: 1.875rem;             /* 30px — CTA labels, stat-strip labels, speaker names, sub-titles */
  --font-size-body-lg: 1.5625rem;          /* 25px — HOMA about body, KEY DATES hero body (serif) */
  --font-size-body: 1.5rem;                /* 24px — hero body, section paragraphs (serif) */
  --font-size-body-23: 1.4375rem;          /* 23px — minor */
  --font-size-link-italic: 1.375rem;       /* 22px — "Read more" links (serif bold italic) */
  --font-size-body-sm: 1.25rem;            /* 20px — news/affiliation/schedule body; pill labels */
  --font-size-nav: 1.125rem;               /* 18px — top-nav items */
  --font-size-caption: 1rem;               /* 16px — footer links, NEWS badge */

  /* === Typography — weights === */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* === Typography — line-heights ===
     Audit shows mostly 100%, hero 55/50, names 35/30. */
  --line-height-solid: 1;        /* 100% — most headings, labels, CTAs */
  --line-height-tight: 1.1;      /* 55px on 50px — HOMA hero */
  --line-height-name: 1.167;     /* 35px on 30px — person-card names */
  --line-height-base: 1.5;       /* default body */
  --line-height-relaxed: 1.7;    /* long serif paragraphs */

  /* === Spacing — semantic scale (derived from Figma usage) === */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs: 1rem;       /* 16px */
  --space-sm: 1.5rem;     /* 24px */
  --space-md: 2rem;       /* 32px */
  --space-lg: 3rem;       /* 48px */
  --space-xl: 4rem;       /* 64px */
  --space-2xl: 6rem;      /* 96px */
  --space-3xl: 8rem;      /* 128px */

  /* Off-scale component spacing tokens (exact Figma values) */
  --space-nav-height: 7.5625rem;              /* 121px — top nav */
  --space-footer-height: 21.4375rem;          /* 343px — footer (1925→1920 width normalized globally) */
  --space-section-vertical-default: 6rem;     /* 96px — default vertical rhythm between sections */

  /* === Radii === */
  --pill-radius: 80px;                /* CTA + tag pills */
  --radius-card-schedule: 22px;       /* schedule day cards */
  --radius-card-stat: 30px;           /* venue stat-tiles */
  --radius-card-topic: 33px;          /* topics cards */
  --radius-full: 9999px;              /* circular portraits/dots */

  /* === Component dimensions (exact Figma values) === */
  --pill-height-primary: 92px;
  --pill-height-secondary: 74px;
  --pill-width-primary-md: 400px;     /* Registration / submission / HOTEL / maps */
  --pill-width-primary-lg: 494px;     /* submiT your paper / REGISTER NOW */
  --pill-width-tag-sm: 318px;         /* abstract/paper template, Journals */
  --pill-width-tag-md: 358px;         /* Special Issue list */
  --pill-width-tag-lg: 474px;         /* Designated General Issue Journals */
  --stat-tile-width: 244px;
  --stat-tile-height: 248px;
  --person-card-speaker-size: 363px;  /* Program speaker portrait */
  --person-card-committee-size: 382px;/* ABOUT MINE committee portrait */

  /* === Shadows === */
  /* TODO: missing in audit — no box-shadow drawn anywhere in the Figma.
     Every card/pill/hero is flat. Add only if depth is approved later. */

  /* === Breakpoints (reference only — used in @media, not as live vars) === */
  /* design viewport: 1920px
     mobile:  ≤480px
     tablet:  481–768px
     laptop:  769–1024px
     desktop: 1025–1440px+ */
}