/* ============================================================
   Hitimu College — Design tokens
   Own brand (navy + amber, Sora/Inter) — NOT the Smart Brains
   Kenya palette. File split + semantic-alias pattern mirrors
   ../../brand/tokens/*.css so the two systems stay easy to
   compare/maintain side by side, even though the values differ.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --navy-950: #071530;   /* deepest navy — hero visual, contact/footer bg */
  --navy-900: #0B1E42;   /* primary navy — headings, nav-cta, section badges */
  --navy-800: #15295C;   /* navy hover/pressed */
  --amber-500: #F5A623;  /* primary accent — CTAs, highlights */
  --amber-600: #D98A0F;  /* amber hover/pressed, eyebrow text */
  --white: #FFFFFF;
  --paper: #F7F6F3;      /* page canvas */
  --ink: #10182B;        /* body text */
  --slate: #5C6478;      /* muted/secondary text */

  /* ---- Borders ---- */
  --line: #E4E1DA;               /* hairline on light surfaces */
  --line-dark: rgba(255, 255, 255, 0.14); /* hairline on navy surfaces */

  /* ============================================================
     Semantic aliases — reference these in pages/components,
     not raw hex.
     ============================================================ */

  /* Surfaces */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-primary: var(--navy-900);
  --surface-primary-deep: var(--navy-950);
  --surface-accent: var(--amber-500);

  /* Text */
  --text-body: var(--ink);
  --text-heading: var(--navy-900);
  --text-muted: var(--slate);
  --text-on-primary: var(--white);
  --text-on-accent: var(--navy-950);
  --text-on-primary-muted: rgba(255, 255, 255, 0.65);
  --text-link: var(--navy-900);
  --text-link-hover: var(--navy-800);

  /* Borders */
  --border-hairline: var(--line);
  --border-hairline-dark: var(--line-dark);
  --border-focus: var(--amber-500);

  /* Interactive — primary (amber CTA, the brand's main action color) */
  --action-primary: var(--amber-500);
  --action-primary-hover: #FFB733;
  --action-primary-text: var(--navy-950);

  /* Interactive — secondary (solid navy, used when amber is already the
     surface color, e.g. nav bar on paper bg, promo band CTA) */
  --action-secondary: var(--navy-900);
  --action-secondary-hover: var(--navy-800);
  --action-secondary-text: var(--white);

  /* Interactive — outline (navy border, transparent fill, for white/paper
     surfaces) */
  --action-outline-border: var(--navy-900);
  --action-outline-text: var(--navy-900);

  /* Interactive — ghost (translucent white border, for use on dark/navy
     surfaces like the hero) */
  --action-ghost-border: rgba(255, 255, 255, 0.3);
  --action-ghost-border-hover: rgba(255, 255, 255, 0.6);
  --action-ghost-text: var(--white);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(245, 166, 35, 0.35);

  /* ---- Type ---- */
  --font-display: 'Sora', sans-serif;   /* headings */
  --font-body: 'Inter', sans-serif;     /* body, UI, forms */

  /* ---- Spacing scale (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;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 9px;    /* default — buttons, inputs */
  --radius-lg: 14px;   /* cards */
  --radius-xl: 16px;   /* contact form panel */
  --radius-pill: 999px;

  /* ---- Shadows (soft, navy-tinted) ---- */
  --shadow-sm: 0 1px 3px rgba(11, 30, 66, 0.08);
  --shadow-md: 0 12px 28px -14px rgba(11, 30, 66, 0.25);
  --shadow-lg: 0 20px 40px -18px rgba(11, 30, 66, 0.3);

  /* ---- Layout ---- */
  --content-max: 1180px;
  --gutter: 32px;

  /* ---- Motion (minimal, fast) ---- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}