/* =============================================================
   ak-tokens.css — Abhilash Krishnan design system, single source.
   Loaded by the static homepage, the static portfolio, and the
   jinko-child WordPress theme. Change a token here, all three
   surfaces update.

   Deploy location on the production server:
     https://abhilashkrishnan.com/assets/ak-tokens.css

   Last updated: May 2026.
   ============================================================= */

/* ---------- Tokens ---------- */

:root {
  /* Color — warm OKLCH, never pure black or white */
  --color-primary: oklch(80% 0.16 75);        /* amber #FBB41C */
  --color-primary-deep: oklch(68% 0.18 65);   /* darker amber, typographic emphasis */
  --color-text: oklch(27% 0.012 55);           /* warm dark gray */
  --color-surface: oklch(99% 0.004 80);        /* warm near-white card bg */
  --color-bg: oklch(97.5% 0.006 80);           /* warm off-white page bg */
  --color-muted: oklch(52% 0.01 55);           /* secondary text */
  --color-border: oklch(93% 0.008 80);         /* card borders */
  --color-border-hover: oklch(88% 0.015 80);   /* hover-deepened border */
  --color-tag-bg: oklch(95% 0.04 80);          /* amber-tinted tag bg */
  --color-tag-text: oklch(45% 0.12 65);        /* deep amber for tag text */

  /* Motion — strong ease curves, fast UI durations */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-fast: 200ms;
  --dur-medium: 320ms;

  /* Type families — locked as identity, do not vary per page */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Box-sizing baseline ---------- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* ---------- Body baseline ---------- */

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-text);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- Links ---------- */

a {
  color: var(--color-primary-deep);
  text-decoration-color: oklch(80% 0.16 75 / 0.4);
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--color-text);
    text-decoration-color: var(--color-primary);
  }
}

/* ---------- Global focus ring — keyboard only ---------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Selection ---------- */

::selection {
  background: var(--color-tag-bg);
  color: var(--color-text);
}

/* ---------- Reduced motion ----------
   Cuts movement; opacity/color transitions still help comprehension. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}