/* KerjaSpot design tokens — the single source for colour, type, spacing, radius.
   Loaded last on every page so it overrides each page's inline :root.
   Blue theme (24 Sep 2026): navy ink, KerjaSpot sky-blue accent, warm cream canvas. */
:root {
  /* ---- Ink (navy scale, hue 250) ---- */
  --ink-1000: #071A33;
  --ink-900:  #0A2240;
  --ink-800:  #14304F;
  --ink-700:  #274566;
  --ink-600:  #4A5F7A;
  --ink-500:  #6B7D93;
  --ink-400:  #98A6B8;

  /* ---- Blue (accent) ---- */
  --blue-800: #075985;
  --blue-700: #0369A1;
  --blue-600: #0284C7;
  --blue-500: #0EA5E9;
  --blue-400: #38BDF8;
  --blue-300: #7DD3FC;
  --blue-100: #E0F2FE;
  --blue-50:  #F0F9FF;
  --blue-500-rgb: 14, 165, 233;
  --blue-300-rgb: 125, 211, 252;

  /* ---- Canvas (warm cream, unchanged) ---- */
  --canvas:    #F7F4EE;
  --surface:   #FFFDF9;
  --surface-2: #F0ECE4;
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-600);
  --fg-on-dark:   #F7F4EE;
  --fg-on-dark-2: #CFD6DF;
  --border-subtle:  #E6E0D5;
  --border-default: #D3CBBD;
  --border-strong:  var(--ink-900);

  /* ---- Semantic ---- */
  --accent:      var(--blue-500);
  --accent-2:    var(--blue-600);
  --accent-deep: var(--blue-700);
  --accent-soft: var(--blue-50);
  --accent-tint: var(--blue-100);
  --success-500: #3F8A5A;
  --success-100: #E3F1E8;
  --gold-500:    #F59E0B;   /* star ratings only */
  --danger-500:  #DC2626;

  /* ---- Legacy aliases (pages still reference these) ---- */
  --teh-700: var(--blue-700);  --teh-600: var(--blue-600);  --teh-500: var(--blue-500);
  --teh-300: var(--blue-300);  --teh-100: var(--blue-100);
  --navy-900: var(--ink-900); --navy-800: var(--ink-800); --navy-700: var(--ink-800);
  --navy-600: var(--ink-700); --navy-500: var(--ink-600);
  --sky-600: var(--blue-600); --sky-500: var(--blue-500); --sky-400: var(--blue-400);
  --sky-100: var(--blue-100); --sky-50: var(--blue-50);
  --ink:   var(--ink-900);  --ink-2: var(--ink-800);  --muted: var(--ink-600);
  --rule:  var(--border-subtle);
  --sage-500: var(--success-500); --sage-100: var(--success-100);

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
  --font-serif:   "Spectral", Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);      /* display: 40 → 80 */
  --text-hero:    clamp(2.5rem, 1.2rem + 3.4vw, 4.25rem);   /* hero h1 beside a card: 40 → 68 */
  --text-h1:      clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);   /* page h1: 34 → 56 */
  --text-h2:      clamp(1.75rem, 1.3rem + 2vw, 2.75rem);     /* 28 → 44 */
  --text-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);    /* 20 → 24 */
  --text-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);  /* 17 → 20 */
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-kicker:  0.6875rem;                                 /* 11px uppercase, tracked */
  --tracking-kicker: 0.08em;
  --leading-tight: 1.05;
  --leading-body:  1.55;

  /* ---- Space ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;   --space-12: 3rem;   --space-16: 4rem; --space-24: 6rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --container: 1200px;

  /* ---- Radius / shadow / motion ---- */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(10,34,64,0.06), 0 1px 3px rgba(10,34,64,0.08);
  --shadow-md: 0 6px 16px -6px rgba(10,34,64,0.18), 0 2px 4px rgba(10,34,64,0.08);
  --shadow-lg: 0 24px 56px -22px rgba(10,34,64,0.45);
  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --duration-fast: 150ms; --duration-normal: 260ms;

  /* Breakpoints (for reference; CSS cannot read these): 680px phone, 1000px tablet, 1280px desktop */
}