/* St. Andrews - tokens do design system, concatenados pelo build. */
/* St. Andrews webfonts — Montserrat (titles) + Inter (body).
   Loaded from Google Fonts; @font-face rules live in these stylesheets. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');


/* ---- tokens/colors.css ---- */
/* St. Andrews color palette — indigo dominates, red is the accent of energy. */
:root {
  /* Institutional */
  --sa-indigo: #312782;          /* Indigo St. Andrews — primary */
  --sa-red: #C1201F;             /* Vermelho St. Andrews — accent */

  /* Support colors */
  --sa-indigo-deep: #241B5E;     /* Indigo Profundo */
  --sa-red-vivid: #D6302A;       /* Vermelho Vivo — globe center */
  --sa-red-deep: #9E1519;        /* Vermelho Profundo — globe outline */
  --sa-mist: #EDECF4;            /* Cinza Névoa — light surface */
  --sa-graphite: #1A1730;        /* Grafite — near-black text/ink */
  --sa-white: #FFFFFF;

  /* Extended neutrals derived from indigo/graphite for UI use */
  --sa-ink-70: #4a4470;
  --sa-ink-50: #6d6890;
  --sa-ink-30: #a6a2bd;
  --sa-line: #d9d7e6;            /* hairline borders */
  --sa-surface-2: #f6f5fb;       /* subtle raised surface */

  /* Semantic aliases */
  --text-strong: var(--sa-graphite);
  --text-body: #2c2842;
  --text-muted: var(--sa-ink-50);
  --text-on-indigo: var(--sa-white);
  --text-on-red: var(--sa-white);

  --surface-page: var(--sa-white);
  --surface-card: var(--sa-white);
  --surface-muted: var(--sa-mist);
  --surface-brand: var(--sa-indigo);
  --surface-brand-deep: var(--sa-indigo-deep);

  --border-default: var(--sa-line);
  --border-strong: var(--sa-ink-30);

  --accent: var(--sa-red);
  --accent-hover: var(--sa-red-deep);
  --brand: var(--sa-indigo);
  --brand-hover: var(--sa-indigo-deep);

  --focus-ring: color-mix(in srgb, var(--sa-indigo) 45%, transparent);

  /* Brand gradients */
  --grad-globe: radial-gradient(circle at 42% 38%, var(--sa-red-vivid), var(--sa-red-deep));
  --grad-indigo: linear-gradient(135deg, var(--sa-indigo) 0%, var(--sa-indigo-deep) 100%);
}


/* ---- tokens/typography.css ---- */
/* St. Andrews typography — Montserrat for titles/highlights, Inter for body. */
:root {
  --font-display: 'Montserrat', system-ui, sans-serif;  /* títulos & destaques */
  --font-body: 'Inter', system-ui, sans-serif;          /* texto corrido */

  /* 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 */
  --fw-extrabold: 800; /* @kind other */

  /* Type scale */
  --fs-display: 3.5rem;   /* 56 */
  --fs-h1: 2.5rem;        /* 40 */
  --fs-h2: 2rem;          /* 32 */
  --fs-h3: 1.5rem;        /* 24 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-lg: 1.125rem;      /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-sm: 0.875rem;      /* 14 */
  --fs-xs: 0.75rem;       /* 12 */

  /* Line heights */
  --lh-tight: 1.1; /* @kind other */
  --lh-heading: 1.2; /* @kind other */
  --lh-snug: 1.4; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* Letter spacing — brand uses airy tracking on eyebrow/caps labels */
  --ls-caps: 0.18em; /* @kind other */
  --ls-wide: 0.06em; /* @kind other */
  --ls-tight: -0.01em; /* @kind other */
}


/* ---- tokens/spacing.css ---- */
/* St. Andrews spacing, radii, shadows, layout. 4px base rhythm. */
:root {
  --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;

  /* Corner radii — brand is friendly/rounded, capsule for pills/buttons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows — soft indigo-tinted elevation, never harsh black */
  --shadow-sm: 0 1px 2px rgba(26, 23, 48, 0.06), 0 1px 3px rgba(26, 23, 48, 0.08);
  --shadow-md: 0 4px 12px rgba(49, 39, 130, 0.10), 0 2px 6px rgba(26, 23, 48, 0.06);
  --shadow-lg: 0 12px 32px rgba(49, 39, 130, 0.16), 0 4px 12px rgba(26, 23, 48, 0.08);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Layout */
  --container-max: 1200px; /* @kind other */
  --container-narrow: 760px; /* @kind other */

  /* Motion — brand voice is dynamic but never gimmicky */
  --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: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}