/* QuickTools design tokens — hn. brand (Hanung Nugroho). Load before every other stylesheet; component CSS uses these
   variables, never raw hex values. The palette follows the hn. personal site (warm off-white paper, charcoal, deep red):
   light paper #f7f6f3 and ink #24252a, dark charcoal #17191e with #e6e5e2 ink, red #c4262b for fills that carry white
   text and for red text on light surfaces, #ff4743 for red text on dark. Logo colours are fixed in the artwork (black or
   white "hn" with a #C45A12 dot) and are never recoloured. Text pairs meet WCAG 2.2 AA (docs/blueprint/12-brand-and-experience.md). */

:root {
  color-scheme: light;

  /* Brand: the fill of primary buttons and the active item (white text on it), and red as text on the current surface. */
  --brand: #c4262b; --brand-hover: #a71d22; --brand-pressed: #8e181c; --on-brand: #ffffff;
  --accent: #c4262b; --accent-hover: #a71d22;
  --rule: #ee3135;   /* decorative brand rules (header and card top lines); never text */

  /* Surfaces and text (light theme, the default). */
  --ink: #24252a; --muted: #65656b; --line: #dfdedb; --field-line: #86868c;
  --canvas: #f7f6f3; --surface: #ffffff; --raised: #ffffff; --tint: #f1f0ec;
  --tint-brand: rgb(196 38 43 / 7%);
  --charcoal: #202329; --panel: #17191e; --panel-ink: #e6e5e2; --panel-muted: #b7b5b1;

  /* Status. A positive state is charcoal with a check icon. */
  --success: #2b2d33; --success-bg: #ebeae6; --on-success: #ffffff;
  --warning: #855600; --warning-bg: #fbf0d4; --warning-fill: #f5b935; --on-warning: #24252a;
  --danger: #c4262b; --danger-bg: #f6e8e6; --on-danger: #ffffff;
  --info: #176b87; --info-bg: #e3eff3; --on-info: #ffffff;
  --neutral: #6a6a70; --neutral-bg: #efeeea;
  --focus: #c4262b;

  /* Type: Rethink Sans everywhere (hn-public.css declares the face). */
  --font: "Rethink Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-public: "Rethink Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-micro: 12px; --fs-meta: 14px; --fs-body: 16px; --fs-title: 16px; --fs-heading: 18px; --fs-lead: 21px;
  --fs-number: 24px; --fs-display: 30px; --fs-hero: 36px; --fs-jumbo: 48px;

  /* Shape and elevation. */
  --radius-xs: .4rem; --radius-sm: .5rem; --radius: .85rem; --radius-dialog: 1rem; --radius-lg: 1.25rem; --radius-pill: 999px;
  --shadow: 0 .2rem .75rem rgb(36 37 42 / 6%);
  --sidebar: clamp(290px, 16.7vw, 320px); --header-h: 76px;
}

/* The large type steps scale down on a phone. */
@media (max-width: 767.98px) { :root { --fs-display: 24px; --fs-hero: 30px; --fs-jumbo: 36px; } }

[data-theme="dark"] {
  color-scheme: dark;
  --brand: #c4262b; --brand-hover: #d42226; --brand-pressed: #a71d22; --on-brand: #ffffff;
  --accent: #ff4743; --accent-hover: #ff7a76;
  --ink: #e6e5e2; --muted: #b7b5b1; --line: #3b3c40; --field-line: #808086;
  --canvas: #17191e; --surface: #212226; --raised: #27282c; --tint: #27282c;
  --tint-brand: rgb(255 71 67 / 10%);
  --success: #d9d8d4; --success-bg: #303135; --on-success: #24252a;
  --warning: #f3c969; --warning-bg: #3a2f12;
  --danger: #ff4743; --danger-bg: #302124; --on-danger: #17191e;
  --info: #8fd3e8; --info-bg: #1b313a; --on-info: #24252a;
  --neutral-bg: #2c2d31;
  --focus: #ff4743;
  --shadow: 0 .35rem 1rem rgb(0 0 0 / 30%);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --brand: #c4262b; --brand-hover: #d42226; --brand-pressed: #a71d22; --on-brand: #ffffff;
    --accent: #ff4743; --accent-hover: #ff7a76;
    --ink: #e6e5e2; --muted: #b7b5b1; --line: #3b3c40; --field-line: #808086;
    --canvas: #17191e; --surface: #212226; --raised: #27282c; --tint: #27282c;
    --tint-brand: rgb(255 71 67 / 10%);
    --success: #d9d8d4; --success-bg: #303135; --on-success: #24252a;
    --warning: #f3c969; --warning-bg: #3a2f12;
    --danger: #ff4743; --danger-bg: #302124; --on-danger: #17191e;
    --info: #8fd3e8; --info-bg: #1b313a; --on-info: #24252a;
    --neutral-bg: #2c2d31;
    --focus: #ff4743;
    --shadow: 0 .35rem 1rem rgb(0 0 0 / 30%);
  }
}

/* Minimal base. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--fs-body)/1.4 var(--font); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
code, kbd, samp { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }