/* ============================================================
   Vinicius Rosa Design System — Tokens
   Source of truth: Claude Design (junho 2026)
   Link this file once per page. It imports fonts and all tokens.
   ============================================================ */

/* ---- Fonts (Google Fonts CDN) ---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap');

:root {
  /* ── Families ─────────────────────────────────────────── */
  --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ── NUS Blue — primary / structural ───────────────────── */
  --blue-50:  #EEF4FA;
  --blue-100: #DCE7F2;
  --blue-200: #B4CBE4;
  --blue-300: #7CA2CC;
  --blue-400: #3E6FA8;
  --blue-500: #003D7C;
  --blue-600: #00305F;
  --blue-700: #00254A;
  --blue-800: #001B37;

  /* ── NUS Orange — signature accent ─────────────────────── */
  --orange-50:  #FFF6EC;
  --orange-100: #FDE9D2;
  --orange-200: #FBD3A6;
  --orange-300: #F8B26A;
  --orange-400: #F4942F;
  --orange-500: #EF7C00;
  --orange-600: #CC6800;
  --orange-700: #A05200;

  /* ── Teal — clinical-fresh biomedical ──────────────────── */
  --teal-50:  #ECF7F7;
  --teal-100: #D3ECEC;
  --teal-200: #A8D9D9;
  --teal-300: #72C4C4;
  --teal-400: #3AA8A8;
  --teal-500: #178C8C;
  --teal-600: #0F7172;
  --teal-700: #0C5859;

  /* ── Slate — cool neutrals (blue undertone) ────────────── */
  --slate-50:  #F5F8FA;
  --slate-100: #ECF1F4;
  --slate-200: #DBE3E9;
  --slate-300: #C0CBD3;
  --slate-400: #93A2AD;
  --slate-500: #647585;
  --slate-600: #4A5A69;
  --slate-700: #33424F;
  --slate-800: #1F2B37;
  --slate-900: #0C1B2A;
  --white:     #FFFFFF;

  /* ── Status ─────────────────────────────────────────────── */
  --green-500: #1E8E64; --green-50: #E7F4EE;
  --amber-500: #D08700; --amber-50: #FBF1DC;
  --red-500:   #C0392B; --red-50:   #FBEAE8;

  /* ── Semantic aliases — use these in product code ──────── */
  --brand-primary:     var(--blue-500);
  --brand-primary-ink: var(--blue-700);
  --brand-accent:      var(--orange-500);
  --brand-fresh:       var(--teal-500);

  --text-strong:    var(--slate-900);
  --text-body:      var(--slate-700);
  --text-muted:     var(--slate-500);
  --text-faint:     var(--slate-400);
  --text-on-dark:   var(--white);
  --text-on-accent: var(--white);
  --text-link:      var(--blue-500);
  --text-link-hover:var(--orange-600);

  --surface-page:         #FBFDFD;
  --surface-card:         var(--white);
  --surface-subtle:       var(--slate-50);
  --surface-fresh:        var(--teal-50);
  --surface-inverse:      var(--blue-700);
  --surface-inverse-deep: var(--slate-900);

  --border-subtle: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-ondark: rgba(255,255,255,.16);
  --focus-ring:    var(--orange-500);

  --wash-blue:   var(--blue-50);
  --wash-orange: var(--orange-50);
  --wash-teal:   var(--teal-50);

  /* ── Type scale ──────────────────────────────────────────── */
  --text-2xs: 0.6875rem; /* 11 */
  --text-xs:  0.75rem;   /* 12 */
  --text-sm:  0.875rem;  /* 14 */
  --text-base:1rem;      /* 16 */
  --text-md:  1.125rem;  /* 18 */
  --text-lg:  1.25rem;   /* 20 */
  --text-xl:  1.5rem;    /* 24 */
  --text-2xl: 1.875rem;  /* 30 */
  --text-3xl: 2.375rem;  /* 38 */
  --text-4xl: 3rem;      /* 48 */

  /* ── Heading roles — shared ramp so titles are IDENTICAL across pages ─
     Every page must pull its title size from one of these three tokens
     instead of declaring its own clamp() inline. Each clamp reaches its
     max by ~1280px viewport, so on wide/ultrawide monitors the size is
     constant and pages stop drifting apart. */
  --fs-hero:          clamp(1.95rem, 1.25rem + 2.0vw, 2.7rem); /* home hero sentence            */
  --fs-page-title:    clamp(2rem,    1.30rem + 2.2vw, 3rem);   /* page H1: Who/To read/News/etc */
  --fs-section-title: clamp(1.6rem,  1.15rem + 1.5vw, 2.35rem);/* section H2 inside a page      */

  /* ── Weights ─────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Line heights ────────────────────────────────────────── */
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Letter spacing ──────────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-2xl:    32px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px  rgba(12,27,42,.06);
  --shadow-sm:    0 2px 8px  rgba(12,27,42,.06);
  --shadow-md:    0 10px 28px rgba(12,27,42,.08);
  --shadow-lg:    0 22px 50px rgba(12,27,42,.12);
  --shadow-focus: 0 0 0 3px rgba(239,124,0,.32);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.5);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-narrow: 760px;
  --container-base:   1180px;
  --container-wide:   1280px;
  --gutter:           clamp(1.25rem, 5vw, 4rem);
  --header-height:    72px;
}

/* ── Base element defaults ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Reserve the vertical-scrollbar space on EVERY page so the centered
     max-width containers (header, sections, footer) never shift sideways
     when navigating between a short page (no scrollbar) and a long one.
     This is what kept the "Vinicius ROSA" logo jumping between pages. */
  scrollbar-gutter: stable;
}
/* Fallback for engines without scrollbar-gutter (older Safari): always
   show the vertical scrollbar track so the layout width is constant. */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { margin: 0; color: var(--text-strong); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: var(--font-sans); cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
::selection { background: var(--orange-100); color: var(--blue-700); }

/* ── Text role helpers ───────────────────────────────────── */
.display {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-accent);
  font-weight: var(--weight-semibold);
}
.meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.measure { max-width: 65ch; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}