@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:ital,wght@1,500;1,600;1,700&display=swap');

/* ============================================================
   STUDIFYX — Cobalt Blueprint
   Design tokens · v1.0 (definitief, F083)
   Source: design_handoff_cobalt_blueprint/design-tokens.css
   ============================================================ */
:root {
  /* ---------- Surface & neutral ---------- */
  --paper:   #F2EEE3;  /* default page background — warm cream */
  --paper-2: #FFFFFF;  /* card / chip / raised surface */
  --mist:    #E2DCCC;  /* hairline border, divider, section rule */
  --oat:     #B8A892;  /* trust accent — only on parent surfaces */

  /* ---------- Text ---------- */
  --ink:   #0E1A3A;    /* primary text & "ink" filled surfaces (deep navy) */
  --ink-2: #4B5570;    /* secondary text, meta */

  /* ---------- Primary (Cobalt) ---------- */
  --primary:   #2D6BFF;  /* primary action, link, focus, active nav */
  --primary-2: #1F4FE0;  /* primary hover / pressed, active-icon tint */

  /* ---------- Today / dark surface ---------- */
  --today-bg: #0E1A3A;  /* hero/today card background */
  --today-fg: #F4F4F8;  /* text on today / dark */

  /* ---------- Accents (use sparingly) ---------- */
  --mint:  #7DD9C6;    /* secondary accent — fresh, paired with cobalt */
  --amber: #FFB547;    /* warm highlight (Fyxo glow, warning icon) */
  --berry: #D4486B;    /* error / tertiary, ≤1% of UI */

  /* ---------- Fyxo's own colors — ONLY on the mascot ---------- */
  --fyxo-blue:  #1F4FE0;
  --fyxo-green: #3DD672;

  /* ---------- Typography ---------- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent:  "Fraunces", Georgia, serif;  /* italic only, 1 word at a time */

  /* Type scale (1.250 ratio, 16px base) */
  --fz-12: 0.75rem;    /* 12px — micro / status bar / eyebrow */
  --fz-14: 0.875rem;   /* 14px — meta, secondary, button */
  --fz-16: 1rem;       /* 16px — body */
  --fz-18: 1.125rem;   /* 18px — body large, lead */
  --fz-20: 1.25rem;    /* 20px — h4 */
  --fz-24: 1.5rem;     /* 24px — h3 / today-card headline */
  --fz-30: 1.875rem;   /* 30px — h2 */
  --fz-38: 2.375rem;   /* 38px — h1 mobile */
  --fz-48: 3rem;       /* 48px — h1 tablet */
  --fz-60: 3.75rem;    /* 60px — display desktop */

  --lh-tight: 1.05;
  --lh-snug:  1.22;
  --lh-base:  1.45;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- Radii ---------- */
  --r-sm:   8px;     /* small chips, swatches, icon tiles */
  --r-md:   12px;    /* cards, inputs, intent tiles, today-card */
  --r-lg:   16px;    /* large cards, modals */
  --r-pill: 999px;   /* buttons, status pills, today-card CTA */

  /* ---------- Shadow (soft, tinted with cobalt) ---------- */
  --shadow-card: 0 1px 2px rgba(14,26,58,0.04), 0 4px 12px rgba(14,26,58,0.05);
  --shadow-pop:  0 1px 2px rgba(14,26,58,0.05), 0 8px 24px rgba(14,26,58,0.07);
  --shadow-cta:  0 6px 16px rgba(14,26,58,0.18);   /* today-card CTA on dark */
  --shadow-fyxo: 0 8px 28px rgba(31,79,224,0.18);  /* only behind the mascot */

  /* ---------- Motion ---------- */
  --dur:  180ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* ---------- Layout ---------- */
  --tap-min:        44px;   /* min touch target */
  --container-max:  1280px; /* desktop max width */

  /* ---------- Radius aliases (kept; consumed by .razor.css across the app) ---------- */
  --radius-input:  var(--r-sm);
  --radius-card:   var(--r-md);
  --radius-card-l: var(--r-lg);
  --radius-pill:   var(--r-pill);
}

/* ============================================================
   Reset-ish base
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fz-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Focus — cobalt outline, 2px paper offset
   Required for accessibility; do not remove.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.font-display-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
}

h1 .accent, h2 .accent, h3 .accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--primary-2);
}

/* Legacy scale classes — kept for non-migrated pages (F083-T10 removes if unused) */
.t-display { font-size: var(--fz-38); font-weight: 800; line-height: var(--lh-tight); }
.t-h1      { font-size: 28px;         font-weight: 800; line-height: 1.12; }
.t-h2      { font-size: var(--fz-24); font-weight: 800; line-height: 1.18; }
.t-h3      { font-size: var(--fz-20); font-weight: 700; line-height: 1.22; }
.t-body-l  { font-size: var(--fz-16); font-weight: 400; line-height: var(--lh-base); }
.t-body    { font-size: 15px;         font-weight: 400; line-height: var(--lh-base); }
.t-caption { font-size: var(--fz-12); font-weight: 700; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; }

@media (min-width: 768px) {
  .t-display { font-size: var(--fz-60); }
  .t-h1      { font-size: var(--fz-38); }
  .t-h2      { font-size: var(--fz-30); }
  .t-h3      { font-size: var(--fz-24); }
  .t-body-l  { font-size: var(--fz-18); }
  .t-body    { font-size: var(--fz-16); }
  .t-caption { font-size: 13px; }
}

/* ============================================================
   Legacy button classes — kept for non-migrated pages.
   Migrate to .btn--primary / .btn--ink etc. via F083-T09 sweep.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fz-16);
  text-decoration: none;
  border: 1.5px solid transparent;
  padding: 12px 22px;
  min-height: var(--tap-min);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  cursor: pointer;
}

.btn-primary  { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); }

.btn-ink      { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #1A2756; border-color: #1A2756; }

.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

.btn-tertiary  { background: transparent; color: var(--ink); border: none; padding: 0 4px; min-height: 0; }
.btn-tertiary:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn-block { width: 100%; }
.btn-sm    { font-size: var(--fz-14); padding: 9px 16px; min-height: 40px; }

.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================================================
   Pill tag
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  color: var(--ink-2);
  font-size: var(--fz-12);
  font-weight: 500;
}

/* ============================================================
   Public page layout helpers
   ============================================================ */
.pub-shell {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.pub-section {
  padding: var(--sp-7) 0;
  background: var(--paper);
}

.pub-section-header {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.pub-section-header h2 {
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.16;
  margin: var(--sp-2) 0 0;
}

.pub-section-header p {
  color: var(--ink-2);
  margin: var(--sp-3) auto 0;
  max-width: 520px;
  font-size: 0.97rem;
}

@media (min-width: 768px) {
  .pub-section-header h2 { font-size: var(--fz-38); }
}

.pub-badge {
  display: inline-block;
  padding: .3rem .85rem;
  border: 1px solid var(--mist);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--primary-2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}