/* Design tokens: the single source of truth for colour, type, space, shape, depth, layers and motion
   (Rule-04 Part A, Rule-21 Part B). Components use these names only, never raw values.
   Taken from the v6 landing page the owner chose (DEC-0014).

   Themes are two independent choices, each with a "system" default that follows the device:
     data-theme="light|dark"        colour scheme
     data-contrast="normal|more"    contrast level
   Without JavaScript the device's own preferences apply through the media queries below. */

:root {
  color-scheme: light;

  /* Colour roles */
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f2f4f7;
  --color-surface-inverse: #0e151d;
  --color-text: #141a22;
  --color-text-muted: #4c5665;
  --color-text-inverse: #f2f5f8;
  --color-text-inverse-muted: #a9b3c1;
  --color-border: #d3d8e0;
  --color-border-strong: #141a22;
  --color-border-inverse: #2a3645;
  --color-primary: #5b2fd0;
  --color-primary-hover: #4521a6;
  --color-primary-soft: #eee9fc;
  --color-on-primary: #ffffff;
  --color-primary-on-inverse: #b9a2ff;
  --color-band: #5b2fd0;
  --color-on-band: #ffffff;
  --color-success: #0a6b45;
  --color-success-soft: #e2f2ea;
  --color-warning: #7a4f00;
  --color-warning-soft: #fdf1d7;
  --color-danger: #b3261e;
  --color-danger-soft: #fde8e6;
  --color-info: #1553c0;
  --color-info-soft: #e6eefc;
  --color-focus: #5b2fd0;

  /* The certificate is paper: it keeps its own colours in every theme, like a printed sheet would.
     Its accent can be any hue (the sample on the home page changes on each visit); lightness is fixed
     so that white on the accent and ink on the tint always pass contrast (measured on v4, REQ-0007).
     The "verified" label is bright red at the owner's request, as bright as white text allows at 4.5:1. */
  --certificate-paper: #ffffff;
  --certificate-ink: #0b1b33;
  --certificate-muted: #56637a;
  --certificate-edge: #dfe4ec;
  --certificate-accent: #5b2fd0;
  --certificate-tint: #f1ecfd;
  --certificate-flag: #e30d1c;
  --certificate-on-label: #ffffff;
  --certificate-accent-lightness: 0.5;
  --certificate-tint-lightness: 0.94;
  --certificate-tint-chroma: 0.04;

  /* Type. The reader's own system fonts: nothing is downloaded. */
  --font-heading: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-s: 0.9rem;
  --text-m: 1.0625rem;
  --text-l: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --text-2xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
  --text-3xl: clamp(2.3rem, 1.5rem + 3.4vw, 3.75rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --measure: 68ch;

  /* Space */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --space-2xl: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Containers. On very wide screens the page column grows with the screen (Rule-21 Part A). */
  --container: clamp(75rem, 60vw, 110rem);
  --container-narrow: 46rem;
  --control-height: 3rem;
  --control-height-s: 2.75rem;
  --target-min: 2.75rem;

  /* Shape and depth */
  --radius-s: 2px;
  --radius-m: 6px;
  --radius-l: 14px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --focus-width: 3px;
  --shadow-s: 0 1px 2px rgb(20 26 34 / 0.06);
  --shadow-m: 0 1px 2px rgb(20 26 34 / 0.06), 0 12px 28px -12px rgb(20 26 34 / 0.2);

  /* Layers */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Motion (Rule-04 Part C). Durations fall to zero or to fades by level; see base.css. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 160ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --stagger: 60ms;

  /* Device safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Compact density, for data-heavy admin screens (Rule-04 Part A). Touch devices keep full-size targets. */
[data-density="compact"] {
  --control-height: 2.5rem;
  --control-height-s: 2.25rem;
  --space-m: 0.75rem;
  --space-l: 1.125rem;
}
@media (pointer: coarse) {
  [data-density="compact"] {
    --control-height: 3rem;
    --control-height-s: 2.75rem;
  }
}

/* ---- Dark ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-surface: #0d1319;
    --color-surface-raised: #131c26;
    --color-surface-sunken: #121a23;
    --color-surface-inverse: #080c11;
    --color-text: #eef1f5;
    --color-text-muted: #a4aebb;
    --color-text-inverse: #eef1f5;
    --color-text-inverse-muted: #a4aebb;
    --color-border: #273342;
    --color-border-strong: #eef1f5;
    --color-border-inverse: #243040;
    --color-primary: #b9a2ff;
    --color-primary-hover: #d0c0ff;
    --color-primary-soft: #241a47;
    --color-on-primary: #170d38; --color-band: #b9a2ff; --color-on-band: #170d38;
    --color-primary-on-inverse: #b9a2ff;
    --color-success: #5fd0a0;
    --color-success-soft: #12301f;
    --color-warning: #f0c45c;
    --color-warning-soft: #33290c;
    --color-danger: #ff9a92;
    --color-danger-soft: #3a1512;
    --color-info: #8fb4ff;
    --color-info-soft: #14233f;
    --color-focus: #b9a2ff;
    --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-m: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 28px -12px rgb(0 0 0 / 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #0d1319;
  --color-surface-raised: #131c26;
  --color-surface-sunken: #121a23;
  --color-surface-inverse: #080c11;
  --color-text: #eef1f5;
  --color-text-muted: #a4aebb;
  --color-text-inverse: #eef1f5;
  --color-text-inverse-muted: #a4aebb;
  --color-border: #273342;
  --color-border-strong: #eef1f5;
  --color-border-inverse: #243040;
  --color-primary: #b9a2ff;
  --color-primary-hover: #d0c0ff;
  --color-primary-soft: #241a47;
  --color-on-primary: #170d38; --color-band: #b9a2ff; --color-on-band: #170d38;
  --color-primary-on-inverse: #b9a2ff;
  --color-success: #5fd0a0;
  --color-success-soft: #12301f;
  --color-warning: #f0c45c;
  --color-warning-soft: #33290c;
  --color-danger: #ff9a92;
  --color-danger-soft: #3a1512;
  --color-info: #8fb4ff;
  --color-info-soft: #14233f;
  --color-focus: #b9a2ff;
  --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-m: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 28px -12px rgb(0 0 0 / 0.7);
}

/* ---- More contrast, on light ---- */
@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]):not([data-theme="dark"]) {
    --color-text: #000000;
    --color-text-muted: #1f242b;
    --color-border: #000000;
    --color-border-strong: #000000;
    --color-surface-sunken: #ffffff;
    --color-primary: #3a12a8;
    --color-primary-hover: #26087a; --color-band: #3a12a8;
    --color-primary-soft: #ffffff;
    --color-success: #004d2c;
    --color-success-soft: #ffffff;
    --color-warning: #4d3200;
    --color-warning-soft: #ffffff;
    --color-danger: #8c0000;
    --color-danger-soft: #ffffff;
    --color-info: #002e8a;
    --color-info-soft: #ffffff;
    --color-focus: #000000;
    --border-thin: 2px;
    --border-thick: 3px;
    --focus-width: 4px;
  }
}
:root[data-contrast="more"]:not([data-theme="dark"]) {
  --color-text: #000000;
  --color-text-muted: #1f242b;
  --color-border: #000000;
  --color-border-strong: #000000;
  --color-surface-sunken: #ffffff;
  --color-primary: #3a12a8;
  --color-primary-hover: #26087a; --color-band: #3a12a8;
  --color-primary-soft: #ffffff;
  --color-success: #004d2c;
  --color-success-soft: #ffffff;
  --color-warning: #4d3200;
  --color-warning-soft: #ffffff;
  --color-danger: #8c0000;
  --color-danger-soft: #ffffff;
  --color-info: #002e8a;
  --color-info-soft: #ffffff;
  --color-focus: #000000;
  --border-thin: 2px;
  --border-thick: 3px;
  --focus-width: 4px;
}

/* ---- More contrast, on dark ---- */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-contrast="normal"]):not([data-theme="light"]) {
    --color-surface: #000000;
    --color-surface-raised: #000000;
    --color-surface-sunken: #000000;
    --color-text: #ffffff;
    --color-text-muted: #e6e9ee;
    --color-border: #ffffff;
    --color-border-strong: #ffffff;
    --color-primary: #d9ccff;
    --color-primary-hover: #ffffff;
    --color-primary-soft: #000000;
    --color-on-primary: #000000; --color-band: #d9ccff; --color-on-band: #000000;
    --color-success: #8af0c2;
    --color-success-soft: #000000;
    --color-warning: #ffe08a;
    --color-warning-soft: #000000;
    --color-danger: #ffc2bd;
    --color-danger-soft: #000000;
    --color-info: #c2d6ff;
    --color-info-soft: #000000;
    --color-focus: #ffffff;
    --border-thin: 2px;
    --border-thick: 3px;
    --focus-width: 4px;
  }
}
:root[data-theme="dark"][data-contrast="more"] {
  --color-surface: #000000;
  --color-surface-raised: #000000;
  --color-surface-sunken: #000000;
  --color-text: #ffffff;
  --color-text-muted: #e6e9ee;
  --color-border: #ffffff;
  --color-border-strong: #ffffff;
  --color-primary: #d9ccff;
  --color-primary-hover: #ffffff;
  --color-primary-soft: #000000;
  --color-on-primary: #000000; --color-band: #d9ccff; --color-on-band: #000000;
  --color-success: #8af0c2;
  --color-success-soft: #000000;
  --color-warning: #ffe08a;
  --color-warning-soft: #000000;
  --color-danger: #ffc2bd;
  --color-danger-soft: #000000;
  --color-info: #c2d6ff;
  --color-info-soft: #000000;
  --color-focus: #ffffff;
  --border-thin: 2px;
  --border-thick: 3px;
  --focus-width: 4px;
}