/*
 * Skuery house style — design tokens
 * Single source of truth for colour, type and elevation. See the identity guide, §02–§03.
 * Contrast ratios in comments are measured against the token's intended ground.
 */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --sk-ink: #06211F;        /* near-black teal; primary ground for dark surfaces */
  --sk-teal: #0E6B62;       /* primary brand colour */
  --sk-teal-deep: #0A544D;  /* hover/active on light, and focus rings (8.16:1 on Bone) */
  --sk-teal-light: #4FBFAF; /* the primary, made legible on Ink (7.55:1) */
  --sk-scan: #2FD9BE;       /* accent. Dark grounds only — 1.65:1 on Bone, decorative there */

  /* ---- Neutrals (green-biased, deliberately not warm cream) ----------- */
  --sk-bone: #F5F7F4;
  --sk-slate: #5A6B66;      /* muted/secondary text, 5.23:1 on Bone */

  /* ---- Applied roles: light ------------------------------------------- */
  --sk-bg: var(--sk-bone);
  --sk-surface: #FFFFFF;
  --sk-surface-sunken: #EDF1EE;
  --sk-line: #DCE5E1;
  --sk-line-strong: #C2CFC9;
  --sk-fg: var(--sk-ink);
  --sk-fg-muted: var(--sk-slate);
  --sk-accent: var(--sk-teal);
  --sk-accent-hover: var(--sk-teal-deep);
  --sk-on-accent: #FFFFFF;  /* 6.37:1 on Teal */
  --sk-focus: var(--sk-teal-deep);

  /* ---- Semantic (state, never used as brand accent) ------------------- */
  --sk-amber: #94570D;      /* awaiting review, 5.37:1 on Bone */
  --sk-amber-bg: #FAEFDC;
  --sk-red: #A8302C;        /* rejected / validation failure, 6.24:1 on Bone */
  --sk-red-bg: #FAE3E1;
  --sk-blue: #255F8A;       /* received from sandbox / informational, 6.32:1 on Bone */
  --sk-blue-bg: #E0EDF6;
  --sk-green-bg: #DCEFE9;   /* approved / published, pairs with --sk-accent text */

  /* ---- Type ---------------------------------------------------------- */
  --sk-font-display: Archivo, "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  --sk-font-text: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --sk-font-mono: "IBM Plex Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  --sk-step--1: 0.8125rem;  /* 13px — captions, table meta */
  --sk-step-0: 0.9375rem;   /* 15px — body/UI default */
  --sk-step-1: 1.125rem;    /* 18px — card titles */
  --sk-step-2: 1.5rem;      /* 24px — section headings */
  --sk-step-3: 2rem;        /* 32px — page titles */
  --sk-step-4: 2.75rem;     /* 44px — display */

  --sk-label: 0.6875rem;    /* 11px uppercase mono field label */
  --sk-label-tracking: 0.09em;

  /* ---- Form & depth --------------------------------------------------- */
  --sk-radius-sm: 6px;
  --sk-radius: 10px;
  --sk-radius-lg: 14px;
  --sk-shadow: 0 1px 2px rgba(6, 33, 31, 0.06), 0 8px 24px -12px rgba(6, 33, 31, 0.18);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sk-bg: var(--sk-ink);
    --sk-surface: #0D2C28;
    --sk-surface-sunken: #041917;
    --sk-line: #1C3B36;
    --sk-line-strong: #2A4F49;
    --sk-fg: var(--sk-bone);
    --sk-fg-muted: #9DB5AE;          /* 7.75:1 on Ink */
    --sk-accent: var(--sk-teal-light);
    --sk-accent-hover: var(--sk-scan);
    --sk-on-accent: var(--sk-ink);
    --sk-focus: var(--sk-scan);
    --sk-amber: #E6A93C;             /* 8.12:1 on Ink */
    --sk-amber-bg: #33240B;
    --sk-red: #F08279;               /* 6.57:1 on Ink */
    --sk-red-bg: #3A1614;
    --sk-blue: #7CC0E8;              /* 8.48:1 on Ink */
    --sk-blue-bg: #102C3D;
    --sk-green-bg: #0C3A33;
    --sk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

/* An explicit choice must win over the OS preference, in both directions. */
:root[data-theme="light"] {
  --sk-bg: var(--sk-bone);
  --sk-surface: #FFFFFF;
  --sk-surface-sunken: #EDF1EE;
  --sk-line: #DCE5E1;
  --sk-line-strong: #C2CFC9;
  --sk-fg: var(--sk-ink);
  --sk-fg-muted: var(--sk-slate);
  --sk-accent: var(--sk-teal);
  --sk-accent-hover: var(--sk-teal-deep);
  --sk-on-accent: #FFFFFF;
  --sk-focus: var(--sk-teal-deep);
  --sk-amber: #94570D;
  --sk-amber-bg: #FAEFDC;
  --sk-red: #A8302C;
  --sk-red-bg: #FAE3E1;
  --sk-blue: #255F8A;
  --sk-blue-bg: #E0EDF6;
  --sk-green-bg: #DCEFE9;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --sk-bg: var(--sk-ink);
  --sk-surface: #0D2C28;
  --sk-surface-sunken: #041917;
  --sk-line: #1C3B36;
  --sk-line-strong: #2A4F49;
  --sk-fg: var(--sk-bone);
  --sk-fg-muted: #9DB5AE;
  --sk-accent: var(--sk-teal-light);
  --sk-accent-hover: var(--sk-scan);
  --sk-on-accent: var(--sk-ink);
  --sk-focus: var(--sk-scan);
  --sk-amber: #E6A93C;
  --sk-amber-bg: #33240B;
  --sk-red: #F08279;
  --sk-red-bg: #3A1614;
  --sk-blue: #7CC0E8;
  --sk-blue-bg: #102C3D;
  --sk-green-bg: #0C3A33;
  color-scheme: dark;
}