/* ============================================================================
   Carzure — design tokens
   Generated from the Claude Design project "Carzure Logo Design Concepts",
   file: Carzure Identity.dc.html  (Identity system · v1 · 2d Two Weights)

   Rules carried over verbatim from the identity spec:
   - INK carries ~90% of the surface area. AZURE appears only on the square
     dot, buttons and data emphasis — "蓝越少越贵".
   - SKY is for blue on dark grounds only. Never on white.
   - Large-format paint (containers, car covers) uses the pure white
     single-colour lockup, dot included.
   ==========================================================================*/

:root {
  /* --- Brand ------------------------------------------------------------ */
  --cz-ink: #16263c;          /* primary — 90% of surface area */
  --cz-azure: #2f6fbf;        /* accent — dot, buttons, data emphasis only */
  --cz-sky: #9cc4e8;          /* blue on dark grounds only (fallback value) */
  --cz-paper: #eef1f5;        /* page ground */
  --cz-surface: #fdfdfe;      /* cards, panels */

  /* Ink family — dark panels, hatches, container stripes */
  --cz-ink-700: #1b2a3d;
  --cz-ink-600: #203145;
  --cz-ink-500: #22334a;

  /* --- Text ------------------------------------------------------------- */
  --cz-text: var(--cz-ink);
  --cz-text-body: #4c5867;
  --cz-text-muted: #55616f;
  --cz-text-soft: #5c6877;
  /* Was #8d97a3, which measured 2.62:1 on paper — below the 4.5:1 AA floor.
     This token carries the form field labels and the fine print, which people
     have to read, so it is now 4.65:1. The smallest labels get their hierarchy
     from size and letter-spacing instead of from being too pale to read. */
  --cz-text-faint: #5e6977;
  --cz-text-on-dark: #fdfdfe;
  --cz-text-on-dark-muted: rgba(253, 253, 254, 0.7);
  --cz-text-on-dark-soft: rgba(253, 253, 254, 0.55);
  --cz-text-on-dark-faint: rgba(253, 253, 254, 0.5);

  /* --- Lines ------------------------------------------------------------ */
  --cz-line: #dde3ea;         /* card borders */
  --cz-line-soft: #e2e8ef;    /* hairline dividers inside cards */
  --cz-line-hair: #e7ecf1;    /* header underline */
  --cz-line-strong: #d9e0e8;  /* masthead rule */
  --cz-line-dash: #c8d2dc;    /* clearspace / placeholder frames */
  --cz-line-on-dark: rgba(253, 253, 254, 0.16);

  /* --- Type ------------------------------------------------------------- */
  /* Archivo has no CJK glyphs, so Chinese falls through to Noto Sans SC
     automatically — which is exactly the pairing the identity specifies. */
  --cz-font-sans: Archivo, "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cz-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;

  --cz-w-hair: 200;           /* "zure", display counter-weight */
  --cz-w-light: 300;          /* Chinese body */
  --cz-w-regular: 400;
  --cz-w-medium: 500;
  --cz-w-bold: 600;           /* "car", headings, totals */

  --cz-track-display: -0.02em;
  --cz-track-word: -0.005em;  /* the wordmark */
  --cz-track-label: 0.18em;   /* mono labels */
  --cz-track-eyebrow: 0.2em;
  --cz-track-plate: 0.22em;   /* widest — card / seal legends */

  /* --- Logo geometry ---------------------------------------------------- */
  /* Everything scales off the logo's own font-size, so one number sets a
     lockup at any placement. Derived from the size ramp in the spec:
     76px→dot 15 · 68→13 · 46→10 · 40→8 · 26→6 · 22→5 */
  --cz-logo-dot: 0.2em;       /* square dot ≈ ¼ cap height */
  --cz-logo-gap: 0.2em;       /* wordmark → dot */
  --cz-logo-drop: 0.11em;     /* dot sits on the baseline */
  --cz-logo-clearspace: 0.5em;/* 留白 = 字高的一半, all four sides */
  --cz-logo-min: 14px;        /* below this, use the "cz" monogram */

  /* --- Radii ------------------------------------------------------------ */
  --cz-r-xs: 6px;
  --cz-r-sm: 8px;
  --cz-r-md: 10px;
  --cz-r-lg: 12px;
  --cz-r-xl: 14px;

  /* --- Space ------------------------------------------------------------ */
  --cz-s-1: 4px;
  --cz-s-2: 8px;
  --cz-s-3: 12px;
  --cz-s-4: 16px;
  --cz-s-5: 20px;
  --cz-s-6: 26px;
  --cz-s-7: 32px;
  --cz-s-8: 40px;
  --cz-s-9: 56px;
  --cz-s-10: 72px;
  --cz-s-11: 96px;

  /* One alignment grid for the whole page. The hero is full-bleed for its
     photograph but its *content* is inset to exactly this measure, so the
     headline starts on the same vertical as the header wordmark at every
     width — previously the hero jutted 185px further left on a 1920 screen. */
  --cz-shell: 1720px;
  --cz-shell-pad: 56px;
  --cz-shell-text: 1180px;    /* reading-width pages */

  /* Height of the sticky header. Anchor targets subtract it so a jump does
     not land the heading underneath the bar. Keep in step with
     .cz-header__inner padding if that ever changes. */
  --cz-header-h: 89px;

  /* --- Motion ----------------------------------------------------------- */
  --cz-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --cz-fast: 140ms;
  --cz-slow: 260ms;
}

/* SKY is derived, not picked: the identity computes it as the brand mixed
   52% into white in oklch. Where color-mix is supported we use the real
   derivation so a brand-colour swap stays consistent. */
@supports (color: color-mix(in oklch, #2f6fbf, white 52%)) {
  :root {
    --cz-sky: color-mix(in oklch, var(--cz-azure), white 52%);
  }
}

/* The identity component exposes brandColor / inkColor as swappable props.
   These are the sanctioned alternates — used by the brand guide's controls. */
:root {
  --cz-alt-brand-1: #2f6fbf;
  --cz-alt-brand-2: #1b5e5a;
  --cz-alt-brand-3: #8a3a2a;
  --cz-alt-brand-4: #3c4a5c;
  --cz-alt-ink-1: #16263c;
  --cz-alt-ink-2: #1a1a1c;
  --cz-alt-ink-3: #14202a;
  --cz-alt-ink-4: #221d2b;
}