/* Rôdney Costa — tokens do design system, achatados. GERADO: não edite. */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ./tokens/fonts.css */
/* Webfonts — Google Fonts substitutes for the brand's commercial faces.
   Brand display face: Blair ITC (glyphic/engraved geometric caps) → Josefin Sans
   Brand text face:    Gotham Light (geometric sans)            → Montserrat
   SUBSTITUTIONS — replace with licensed Blair ITC / Gotham when available. */


/* ./tokens/colors.css */
:root{
  /* ── Brand core (from brand manual) ───────────────────────── */
  --navy: #0e1a2b;        /* RGB 14.26.43  — primary ink / backgrounds */
  --gold: #ad9b40;        /* RGB 173.155.64 — accent */
  --paper: #f4f4f4;       /* RGB 244.244.244 — off-white surface */

  /* ── Navy scale ───────────────────────────────────────────── */
  --navy-950: #070f19;
  --navy-900: #0a1420;
  --navy-800: #0e1a2b;    /* = --navy */
  --navy-700: #142438;
  --navy-600: #1e2b40;    /* slate watermark tone */
  --navy-500: #2b3a52;
  --navy-400: #3f4f68;
  --navy-300: #5d6c84;

  /* ── Gold scale ───────────────────────────────────────────── */
  --gold-800: #6f6222;
  --gold-700: #8a7a2f;
  --gold-600: #ad9b40;    /* = --gold */
  --gold-500: #c1af54;
  --gold-400: #d3c479;
  --gold-300: #e4d9a6;
  --gold-200: #f0ead0;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --white: #ffffff;
  --grey-050: #f4f4f4;
  --grey-100: #e9e9ea;
  --grey-200: #d7d8da;
  --grey-300: #b7b9bd;
  --grey-400: #8c8f95;
  --grey-500: #5f636b;
  --grey-600: #3d424b;
  --black: #05090f;

  /* ── Semantic: surfaces ───────────────────────────────────── */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-inverse: var(--navy-800);
  --surface-inverse-2: var(--navy-700);
  --surface-watermark: var(--navy-600);

  /* ── Semantic: text ───────────────────────────────────────── */
  --text-primary: var(--navy-800);
  --text-secondary: var(--grey-500);
  --text-muted: var(--grey-400);
  --text-accent: var(--gold-600);
  --text-inverse: var(--white);
  --text-inverse-muted: rgba(255,255,255,0.62);
  --text-on-accent: var(--navy-900);

  /* ── Semantic: borders ────────────────────────────────────── */
  --border-subtle: rgba(14,26,43,0.12);
  --border-strong: rgba(14,26,43,0.28);
  --border-inverse: rgba(255,255,255,0.24);
  --border-accent: var(--gold-600);
  --hairline: 1px;

  /* ── Semantic: interactive ────────────────────────────────── */
  --accent: var(--gold-600);
  --accent-hover: var(--gold-500);
  --accent-press: var(--gold-700);
  --link: var(--gold-700);
  --link-hover: var(--gold-600);

  /* ── Status ───────────────────────────────────────────────── */
  --success: #4f7a52;
  --warning: #b98a2f;
  --danger: #a23b34;
  --info: var(--navy-500);
}

/* ./tokens/typography.css */
:root{
  /* ── Families ─────────────────────────────────────────────── */
  --font-display: 'Josefin Sans', 'Century Gothic', sans-serif; /* subs Blair ITC */
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* subs Gotham Light */
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ── Weights ──────────────────────────────────────────────── */
  --fw-light: 300;    /* @kind other */
  --fw-regular: 400;  /* @kind other */
  --fw-medium: 500;   /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700;     /* @kind other */

  /* ── Type scale (px) ──────────────────────────────────────── */
  --fs-display: 72px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro: 10px;

  /* ── Line heights ─────────────────────────────────────────── */
  --lh-tight: 1.08;   /* @kind other */
  --lh-snug: 1.25;    /* @kind other */
  --lh-normal: 1.55;  /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* ── Letter-spacing — the brand leans on WIDE tracked caps ─── */
  --ls-display: 0.18em;   /* wordmark-style headings */
  --ls-heading: 0.12em;
  --ls-label: 0.28em;     /* eyebrows / SOLI DEO GLORIA */
  --ls-button: 0.16em;
  --ls-body: 0.005em;
}

/* ./tokens/spacing.css */
:root{
  /* 4px base grid */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --section-y: 96px;
}

/* ./tokens/effects.css */
:root{
  /* ── Corner radii — the brand is architectural & squared.
       Sharp corners dominate; small radius only for soft UI. ── */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ── Shadows — restrained, cool-navy tinted, never fluffy ── */
  --shadow-xs: 0 1px 2px rgba(14,26,43,0.08);
  --shadow-sm: 0 2px 6px rgba(14,26,43,0.10);
  --shadow-md: 0 6px 20px rgba(14,26,43,0.12);
  --shadow-lg: 0 18px 48px rgba(14,26,43,0.18);
  --shadow-inverse: 0 20px 60px rgba(0,0,0,0.45);

  /* ── Borders ──────────────────────────────────────────────── */
  --border-hairline: 1px solid var(--border-subtle);
  --border-frame: 1.5px solid var(--border-inverse); /* the boxed-logo frame motif */

  /* ── Motion — quiet, precise, no bounce ──────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 240ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* ── Focus ────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold-600); /* @kind shadow */
}