/* WASE Industrial Luxury - design tokens.
   Six brand values and nothing else; every derived value is a mix of those six. */
:root{
  /* base palette */
  --wase-warm-white:#F5F2EC;
  --wase-iron:#1C1A18;          /* official brand ink */
  --wase-graphite:#3D3D38;
  --wase-orange:#EE7721;        /* official brand orange, from the logo artwork */
  --wase-wood:#C4B49A;
  --wase-silver:#BEC0C0;        /* official brand silver, the A and E of the wordmark */

  /* derived - mixes only, no new hues */
  --wase-warm-white-2:#EDE8DF;
  --wase-iron-hover:#0F0F0E;
  --wase-orange-hover:#C4641F;
  --wase-wood-tint:#E4DACA;
  --wase-graphite-2:#2A2A26;

  /* surfaces */
  --surface-page:var(--wase-warm-white);
  --surface-sunken:var(--wase-warm-white-2);
  --surface-card:var(--wase-warm-white);
  --surface-dark:var(--wase-iron);
  --surface-dark-2:var(--wase-graphite);
  --surface-tag:var(--wase-wood-tint);

  /* text */
  --text-body:var(--wase-graphite);
  --text-strong:var(--wase-iron);
  --text-muted:#5F5F58;
  --text-accent-ink:#99521D;      /* orange darkened for text on light: 5.2:1 */
  --text-accent-on-dark:#F0A268;  /* orange lightened for text on dark: 5.2:1 on graphite */
  --text-on-dark:var(--wase-warm-white);
  --text-on-dark-muted:var(--wase-silver);
  --text-accent:var(--text-accent-ink);

  /* lines */
  --line-hairline:#DCD5C8;
  --line-standard:var(--wase-wood);
  --line-strong:var(--wase-iron);
  --line-on-dark:#4A4A44;
  --line-accent:var(--wase-orange);

  /* interactive */
  --action-fill:var(--wase-iron);
  --action-fill-hover:var(--wase-iron-hover);
  --action-fill-text:var(--wase-warm-white);
  --action-outline:var(--wase-wood);
  --action-accent:var(--wase-orange);
  --focus-ring:var(--wase-orange);

  /* state */
  --state-ok:#5C6B4A;
  --state-warn:var(--wase-orange);
  --state-error:#8C2F14;
  --state-disabled-text:#5F5F58;
  --state-disabled-line:#D8D2C6;

  /* icons */
  --icon-primary:var(--wase-graphite);
  --icon-secondary:#7A7669;     /* silver is invisible on warm white; icons take a mid ink */
  --icon-accent:var(--wase-orange);

  /* type families. Latin faces are self-hosted; the Chinese display face is
     Noto Serif TC. Chinese body text falls back to the platform UI face. */
  --font-slab:"Zilla Slab","Noto Serif TC",Georgia,serif;
  --font-serif-tc:"Noto Serif TC","Zilla Slab",serif;
  --font-sans:"IBM Plex Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Noto Sans TC","PingFang TC",ui-monospace,monospace;

  --weight-body:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:900;

  --size-display-1:72px;
  --size-display-2:56px;
  --size-h1:40px;
  --size-h2:30px;
  --size-h3:23px;
  --size-h4:19px;
  --size-body-lg:18px;
  --size-body:16px;
  --size-body-sm:14px;
  --size-caption:12px;

  --leading-display:1.06;
  --leading-heading:1.18;
  --leading-body:1.62;
  --leading-tight:1.35;

  --tracking-display:-0.02em;
  --tracking-heading:-0.01em;
  --tracking-label:0.12em;
  --tracking-label-tc:0.2em;

  --text-display:var(--weight-bold) var(--size-display-1)/var(--leading-display) var(--font-slab);
  --text-h1:var(--weight-bold) var(--size-h1)/var(--leading-heading) var(--font-slab);
  --text-h2:var(--weight-bold) var(--size-h2)/var(--leading-heading) var(--font-slab);
  --text-h3:var(--weight-semibold) var(--size-h3)/var(--leading-tight) var(--font-slab);
  --text-p:var(--weight-body) var(--size-body)/var(--leading-body) var(--font-sans);
  --text-label:var(--weight-semibold) var(--size-caption)/1.2 var(--font-sans);

  /* spacing - 4px base, stepped for architectural rhythm */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --gutter:24px;
  --page-pad:40px;
  --page-pad-mobile:20px;
  --max-width:1320px;
  --max-width-prose:640px;
  --section-y:var(--space-9);
  --card-pad:20px;
  --control-h:48px;
  --control-h-sm:36px;
  --nav-h:72px;

  /* borders - this system ships no drop shadows */
  --border-hairline:1px solid var(--line-hairline);
  --border-standard:1px solid var(--line-standard);
  --border-strong:1.5px solid var(--line-strong);
  --border-on-dark:1px solid var(--line-on-dark);
  --rule-accent:3px solid var(--line-accent);
  --radius-none:0px;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-max:6px;
  --inset-line:inset 0 0 0 1px var(--line-standard);

  /* motion - weighted, decelerating, like heavy material coming to rest */
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --duration-slow:420ms;
  --transition-color:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
  --press-translate:translateY(1px);
}

@media (max-width:781px){
  :root{
    --page-pad:var(--page-pad-mobile);
    --size-display-1:44px;
    --size-display-2:36px;
    --size-h1:29px;
    --size-h2:24px;
    --size-h3:20px;
    --section-y:var(--space-8);
  }
}