/* ==========================================================================
   Komma AI — design tokens
   --------------------------------------------------------------------------
   Every brand-specific value for the site lives in this file. To align the
   page 1:1 with the Komma layout folder / kommahr.com, change the values
   below — nothing else in the codebase hard-codes colours, fonts or radii.
   Tints and shades are derived with color-mix(), so changing --brand alone
   recolours buttons, links, tags, highlights and the product illustrations.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --brand: #2e5bff;              /* Komma primary accent (placeholder)   */
  --brand-contrast: #ffffff;     /* text/icons placed on --brand         */

  /* Karma (AI) accent — an aurora gradient. Used ONLY for AI elements so
     "gradient = Karma" reads consistently across the page.               */
  --aurora-1: #1fbf9f;
  --aurora-2: #2e7bff;
  --aurora-3: #8a5cff;

  /* --- Neutrals --------------------------------------------------------- */
  --ink: #101727;                /* primary text + dark sections          */
  --ink-2: #1b2336;
  --text: var(--ink);
  --text-muted: #4f596b;         /* body copy on paper (AA on --paper)    */
  --text-subtle: #616b7d;        /* small UI text (AA on white)           */
  --paper: #f5f3ee;              /* page background                       */
  --paper-2: #ebe7de;
  --surface: #ffffff;            /* cards, product UI                     */
  --surface-2: #faf9f6;
  --line: #e3ded4;
  --line-strong: #d3cdc1;

  /* --- Status ----------------------------------------------------------- */
  --ok: #0f7a4f;
  --warn: #a15f00;
  --danger: #cf3b36;

  /* --- Module colours (used in tags + illustrations) -------------------- */
  --m-recruit: #7a52f4;
  --m-org: #2e5bff;
  --m-onboard: #0c9c95;
  --m-time: #c97a12;
  --m-shift: #de5530;
  --m-pay: #138a5a;
  --m-review: #b93b86;
  --m-profile: #56657d;

  /* --- Buttons ---------------------------------------------------------- */
  --cta-bg: var(--ink);
  --cta-fg: #ffffff;
  --cta-bg-hover: var(--brand);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* --- Shape & depth ---------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 23, 39, 0.06), 0 1px 1px rgba(16, 23, 39, 0.04);
  --shadow: 0 1px 2px rgba(16, 23, 39, 0.05), 0 8px 24px -6px rgba(16, 23, 39, 0.12);
  --shadow-lg: 0 2px 4px rgba(16, 23, 39, 0.04), 0 24px 60px -12px rgba(16, 23, 39, 0.22);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: 16px;
  --section-y: 72px;
}

@media (min-width: 720px) {
  :root { --gutter: 28px; --section-y: 104px; }
}

@media (min-width: 1100px) {
  :root { --gutter: 40px; --section-y: 128px; }
}

/* Derived values — no need to edit these when re-skinning. */
:root {
  --brand-strong: color-mix(in oklab, var(--brand) 82%, black);
  --brand-soft: color-mix(in oklab, var(--brand) 10%, white);
  --brand-softer: color-mix(in oklab, var(--brand) 5%, white);
  --aurora: linear-gradient(115deg, var(--aurora-1) 0%, var(--aurora-2) 50%, var(--aurora-3) 100%);
  /* Darker aurora variants that keep text legible (WCAG AA). */
  --aurora-text: linear-gradient(115deg,
    color-mix(in oklab, var(--aurora-1) 78%, black) 0%,
    color-mix(in oklab, var(--aurora-2) 90%, black) 50%,
    color-mix(in oklab, var(--aurora-3) 90%, black) 100%);
  --aurora-strong: linear-gradient(115deg,
    color-mix(in oklab, var(--aurora-1) 66%, black) 0%,
    color-mix(in oklab, var(--aurora-2) 82%, black) 50%,
    color-mix(in oklab, var(--aurora-3) 82%, black) 100%);
  --aurora-soft: linear-gradient(115deg,
    color-mix(in oklab, var(--aurora-1) 14%, white) 0%,
    color-mix(in oklab, var(--aurora-2) 12%, white) 50%,
    color-mix(in oklab, var(--aurora-3) 14%, white) 100%);
  --ok-soft: color-mix(in oklab, var(--ok) 12%, white);
  --warn-soft: color-mix(in oklab, var(--warn) 13%, white);
  --danger-soft: color-mix(in oklab, var(--danger) 11%, white);
}