/* Ztraqto Ads design tokens v1 — 2026-09-30. Copy verbatim; do not fork per surface. */
:root {
  color-scheme: light;

  /* Brand — the only orange in the product */
  --z-orange: #FF9500;
  --z-orange-tint:   color-mix(in srgb, #FF9500 10%, #fff); /* selected rows, soft CTA bg */
  --z-orange-tint-2: color-mix(in srgb, #FF9500 18%, #fff); /* hover on tint, search highlight */
  --z-orange-line:   color-mix(in srgb, #FF9500 45%, #fff); /* borders around tinted areas */
  --z-on-orange: #FFFFFF;                                   /* bold >=700, >=15px only */
  --z-on-orange-shadow: 0 1px 2px rgba(0, 0, 0, .28);

  /* Neutrals */
  --z-ink:     #1D1F23;  /* primary text, "orange-link" text, focus ring  (16.5:1) */
  --z-ink-2:   #474C54;  /* secondary text (8.6:1) */
  --z-muted:   #62676F;  /* captions, placeholders (5.7:1) — never below 14px */
  --z-bg:      #F6F7F8;  /* app/page background */
  --z-surface: #FFFFFF;  /* cards, panels, header sub-bars */
  --z-sunken:  #F1F3F5;  /* hover rows, inputs-disabled, code bg */
  --z-line:    #E1E4E8;
  --z-line-strong: #C4C9D0;

  /* Status (none of these is an orange hue) */
  --z-success: #1A7F4B;  --z-success-soft: #E8F6EE;  --z-success-line: #A9D8BF;
  --z-warning: #7A6000;  --z-warning-soft: #FFF8D6;  --z-warning-line: #E9D37A; /* gold/yellow */
  --z-danger:  #B42318;  --z-danger-soft:  #FEEFEE;  --z-danger-line:  #F2B8B5; /* 6.6:1 */
  --z-info:    #2F5B86;  --z-info-soft:    #EEF4FA;  --z-info-line:    #BFD1E2;

  /* Focus */
  --z-focus: #1D1F23;
  --z-focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--z-focus); /* for elements where outline is clipped */

  /* Typography */
  --z-font: "Noto Sans JP Variable", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --z-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --z-fs-caption: 14px;  /* badges, timestamps, table headers, footer — the floor */
  --z-fs-small:   15px;  /* help text, meta lines, on-orange minimum */
  --z-fs-body:    16px;  /* body, buttons, inputs, nav, table cells */
  --z-fs-lead:    18px;  /* checklist step titles, list titles, hero lead */
  --z-fs-h4:      20px;  /* card titles */
  --z-fs-h3:      24px;  /* section titles, dialog titles */
  --z-fs-h2:      32px;  /* page titles (app), section headings (home) */
  --z-fs-h1:      40px;  /* legal doc title */
  --z-fs-display: clamp(40px, 5.2vw, 64px); /* homepage hero only */
  --z-lh-body: 1.8;      /* Japanese running text */
  --z-lh-ui: 1.5;        /* controls, rows */
  --z-lh-head: 1.35;
  --z-fw-regular: 400; --z-fw-medium: 500; --z-fw-bold: 700; --z-fw-heavy: 800;

  /* Spacing (4px base) */
  --z-s-1: 4px;  --z-s-2: 8px;  --z-s-3: 12px; --z-s-4: 16px; --z-s-5: 20px;
  --z-s-6: 24px; --z-s-8: 32px; --z-s-10: 40px; --z-s-12: 48px; --z-s-16: 64px; --z-s-24: 96px;
  --z-gutter: clamp(16px, 4vw, 48px);      /* page side padding on every surface */
  --z-panel-gap: clamp(20px, 2.2vw, 28px); /* gap between stacked cards */

  /* Radius */
  --z-r-sm: 6px;    /* badges, small chips, checkbox */
  --z-r-md: 10px;   /* buttons, inputs, nav items, rows */
  --z-r-lg: 14px;   /* cards, panels, callouts */
  --z-r-xl: 20px;   /* dialogs, sheets */
  --z-r-pill: 999px;

  /* Elevation */
  --z-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --z-shadow-2: 0 4px 14px rgba(16, 24, 40, .10);
  --z-shadow-3: 0 18px 48px rgba(16, 24, 40, .18); /* popovers, dialogs, sticky action bar */

  /* Layout */
  --z-bar-h: 64px;         /* orange header, all surfaces (56px < 720px) */
  --z-subbar-h: 48px;      /* white tab bar under the header (legal doc switch) */
  --z-w-page: 1200px;      /* homepage + legal outer width */
  --z-w-app: 1360px;       /* dashboard main column max */
  --z-w-text: 760px;       /* legal/article measure */
  --z-w-sidebar: 264px;    /* dashboard sidebar */
  --z-w-toc: 240px;        /* legal TOC */
  --z-control-h: 44px;     /* min touch target */
  --z-row-dense: 38px;     /* category rows */
  --z-ease: .15s ease;
}
@media (max-width: 720px) { :root { --z-bar-h: 56px; } }
@media (prefers-contrast: more) {
  :root { --z-line: #8A9099; --z-line-strong: #5E646C; --z-muted: #474C54; }
}

/* Base — shared by all surfaces */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--z-bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; background: var(--z-bg); color: var(--z-ink);
  font-family: var(--z-font); font-size: var(--z-fs-body); line-height: var(--z-lh-body);
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  line-break: strict; overflow-wrap: anywhere;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--z-lh-head); font-feature-settings: "palt" 1; letter-spacing: .01em; word-break: auto-phrase; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, samp, pre, .mono { font-family: var(--z-font-mono); font-size: .92em; }
.num, td.num, .metric-card strong { font-variant-numeric: tabular-nums; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--z-orange); }
:focus-visible { outline: 3px solid var(--z-focus) !important; outline-offset: 2px; }
::selection { background: var(--z-orange-tint-2); color: var(--z-ink); }

/* The one link style ("orange link" without an orange text colour) */
.z-link, .document a, .text-button, .row-action {
  color: var(--z-ink); font-weight: var(--z-fw-bold);
  text-decoration: underline; text-decoration-color: var(--z-orange);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.z-link:hover, .document a:hover, .text-button:hover, .row-action:hover {
  text-decoration-thickness: 3px; background: var(--z-orange-tint); color: var(--z-ink);
}

.skip-link {
  position: fixed; z-index: 1000; top: -64px; left: 16px; padding: 10px 16px;
  border-radius: var(--z-r-md); background: var(--z-ink); color: #fff;
  font-size: var(--z-fs-body); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}