/* SaizenLabs design tokens. One source for the HQ pages and the Indonesian product page.
   Raw palette = Brand Brief v2.0 (dark) plus the tested light variants (brand-system.md, section 3).
   Components never use the raw palette: they read the semantic aliases below, which switch
   with the .on-dark / .on-light scope class. Every text pair noted here was computed (WCAG 2.x). */
:root {
  /* raw palette */
  --obsidian: #0B0F14;
  --graphite: #181E27;
  --porcelain: #F5F5F0;
  --porcelain-2: #EAEAE2;
  --white: #FFFFFF;
  --soft-white: #F2F4F6;     /* 17.43 on obsidian */
  --silver: #9AA5B1;         /* 7.68 on obsidian, 6.69 on graphite */
  --cyan: #45C9DD;           /* signal only; 8.50 on graphite */
  --copper: #D9774B;         /* 6.12 on obsidian, 5.34 on graphite */
  --ink: #0B0F14;            /* 17.57 on porcelain */
  --copper-deep: #9C4F26;    /* 5.39 on porcelain; white on it 5.90 */
  --teal-deep: #0B6B7A;      /* 5.65 on porcelain; white on it 6.18 */
  --silver-deep: #5B6672;    /* 5.35 on porcelain, 4.84 on porcelain-2 */
  --wa-green: #1E7A4A;       /* white on it 5.33; WhatsApp action only */
  --line-dark: #2A333F;
  --line-light: #CFCFC4;

  /* type */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --step--1: 0.8125rem;      /* 13px: smallest running text */
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.2rem + 4.6vw, 4.9rem);
  --label: 0.75rem;          /* 12px mono labels, uppercase */

  /* space and shape */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --pill: 999px;
  --tap: 44px;               /* minimum touch target */

  color-scheme: dark;
}

/* semantic aliases, dark scope (default) */
:root, .on-dark {
  --bg: var(--obsidian);
  --surface: var(--graphite);
  --card: color-mix(in srgb, var(--soft-white) 4%, transparent);
  --fg: var(--soft-white);
  --muted: var(--silver);
  --line: var(--line-dark);
  --accent: var(--copper);          /* copper as text or hairline */
  --accent-fill: var(--copper);     /* button fill */
  --on-accent: var(--obsidian);     /* 6.12 */
  --signal: var(--cyan);
  --focus: var(--cyan);
}

/* semantic aliases, light scope */
.on-light {
  --bg: var(--porcelain);
  --surface: var(--porcelain-2);
  --card: var(--white);
  --fg: var(--ink);
  --muted: var(--silver-deep);
  --line: var(--line-light);
  --accent: var(--copper-deep);
  --accent-fill: var(--copper-deep);
  --on-accent: var(--white);        /* 5.90 */
  --signal: var(--teal-deep);
  --focus: var(--teal-deep);
}