design/tokens/colors.css

/* AUTO-GENERATED by @hanzo/tokens scripts/gen-css.mjs from src/theme.ts — DO NOT EDIT.
 * Edit the token in @hanzo/tokens src/theme.ts and re-run `pnpm --filter @hanzo/tokens gen-css`. */
/* Hanzo colour tokens — monochrome, dark-default. One hue, an opacity ladder. */

:root{
  color-scheme:dark;

  /* ——— base neutral ladder ——— */
  --neutral-50:#FAFAFA;
  --neutral-100:#F5F5F5;
  --neutral-200:#E5E5E5;
  --neutral-300:#D4D4D4;
  --neutral-400:#A3A3A3;
  --neutral-500:#737373;
  --neutral-600:#525252;
  --neutral-700:#404040;
  --neutral-800:#262626;
  --neutral-900:#171717;
  --neutral-950:#0A0A0A;
  --pure-black:#000000;
  --pure-white:#FFFFFF;
  --hanzo-black:#0A0A0B;
  --hanzo-white:#FFFFFF;

  /* ——— art: four hues, for artwork only ———
     Light, never paint. They colour hero art and the few soft glows that give a
     section form; chrome, type and every control stay on the monochrome ladder
     below. The same in both themes, because art is not themed. */
  --art-tide:#2F6BFF;
  --art-iris:#8B5CF6;
  --art-ember:#FF7A3D;
  --art-glow:#F4F1FF;

  /* ——— the opacity ladder: the real palette ——— */
  --white-03:rgb(255 255 255 / .03); /* the raised fill */
  --white-05:rgb(255 255 255 / .05);
  --white-06:rgb(255 255 255 / .06);
  --white-08:rgb(255 255 255 / .08);
  --white-10:rgb(255 255 255 / .10);
  --white-14:rgb(255 255 255 / .14); /* selection wash */
  --white-15:rgb(255 255 255 / .15);
  --white-16:rgb(255 255 255 / .16);
  --white-18:rgb(255 255 255 / .18); /* selection tint */
  --white-20:rgb(255 255 255 / .20);
  --white-22:rgb(255 255 255 / .22);
  --white-30:rgb(255 255 255 / .30);
  --white-40:rgb(255 255 255 / .40);
  --white-45:rgb(255 255 255 / .45); /* the dimmest ink */
  --white-55:rgb(255 255 255 / .55);
  --white-60:rgb(255 255 255 / .60);
  --white-78:rgb(255 255 255 / .78);
  --white-80:rgb(255 255 255 / .80);
  --white-92:rgb(255 255 255 / .92); /* body ink */

  /* ——— semantic aliases (dark, the default) ——— */
  --background:#0a0a0a;
  --foreground:#e5e5e5; /* the graded ink, one rung short of #fafafa */
  --card:#0f0f0f;
  --card-foreground:#e5e5e5;
  --popover:#0f0f0f;
  --popover-foreground:#e5e5e5;
  --primary:#fafafa;
  --primary-hover:#e5e5e5;
  --primary-foreground:#0a0a0a;
  --secondary:#262626;
  --secondary-hover:#333333;
  --secondary-foreground:#fafafa;
  --muted:#171717;
  --muted-foreground:#a3a3a3;
  --accent:#262626;
  --accent-hover:var(--secondary-hover); /* the accent under the cursor; a chosen accent restates it */
  --accent-foreground:#fafafa;
  --destructive:#dc2626; /* red-600 — a FILL under its foreground, 4.6:1; the error hue is --state-error */
  --destructive-hover:#b91c1c; /* red-700 — deepens under the cursor, 6.2:1 */
  --destructive-foreground:#fafafa;

  /* ——— boundaries — ONE ladder, cut from alpha, graded by duty ——— */
  --border:var(--white-10); /* the hairline */
  --border-strong:var(--white-16); /* hover, emphasis */
  --border-control:var(--white-15); /* a control's resting edge */
  --border-focus:var(--white-22); /* that control, focused */
  --border-selected:var(--white-30); /* the thing currently CHOSEN */
  --edge:var(--white-06); /* fainter than the hairline: an edge between chrome and page */
  --input:var(--border-control); /* shadcn `border-input` — a control */
  --ring:var(--white-40); /* the focus indicator — 3:1 non-text contrast */
  --ring-halo:var(--white-10); /* the soft halo outside the ring */
  --brand:#e4e4e7;
  --brand-foreground:#09090b;
  --brand-muted:#a3a3a3;
  --black:#000000;
  --white:#fafafa;
  --selection:var(--white-20);

  /* ——— glass: the lift ——— */
  --glass:var(--white-05);
  --glass-strong:var(--white-08);

  /* ——— surface recipes ——— */
  --surface-page:var(--background);
  --surface-card:rgb(38 38 38 / .5); /* -> #181818 on the page */
  --surface-card-emphasis:rgb(38 38 38 / .75); /* -> #1f1f1f — featured */
  --surface-card-quiet:rgb(38 38 38 / .35); /* -> #141414 — story cards */
  --surface-overlay:rgb(23 23 23 / .92); /* dropdown / popover panels */
  --surface-header:rgb(0 0 0 / .7); /* fixed nav, with backdrop blur */
  --surface-scrim:rgb(0 0 0 / .8); /* the dialog / sheet backdrop */

  /* ——— the numeric surface ladder ——— */
  --surface-0:var(--background);
  --surface-1:var(--card);
  --surface-2:var(--muted);
  --surface-3:var(--secondary);

  /* ——— text ranks — a graded ramp, not one flat white ——— */
  --text-primary:#fafafa;
  --text-secondary:var(--white-78);
  --text-tertiary:var(--white-55);
  --text-helper:var(--muted-foreground);
  --text-disabled:var(--white-30);

  /* ——— the ONLY permitted hues (DESIGN.md §2.4) ——— */
  --state-error:#ef4444; /* red-500 — destructive / blocking error */
  --state-error-text:#fca5a5; /* red-300 */
  --state-error-bg:rgb(239 68 68 / .1);
  --state-online:#4ade80; /* green-400 — live status dot */
  --state-success:#22c55e; /* green-500 — "Free" / "Save N%" callouts */
  --chrome-dot-red:rgb(239 68 68 / .6);
  --chrome-dot-yellow:rgb(234 179 8 / .6);
  --chrome-dot-green:rgb(34 197 94 / .6);
}

.light{
  color-scheme:light;

  /* ——— semantic aliases (light) ——— */
  --background:#f7f7f7;
  --foreground:#0a0a0a;
  --card:#f2f2f2;
  --card-foreground:#0a0a0a;
  --popover:#fbfbfb;
  --popover-foreground:#0a0a0a;
  --primary:#0a0a0a;
  --primary-hover:#262626;
  --primary-foreground:#fafafa;
  --secondary:#e4e4e4;
  --secondary-hover:#e0e0e0;
  --secondary-foreground:#0a0a0a;
  --muted:#ededed;
  --muted-foreground:#525252;
  --accent:#e4e4e4;
  --accent-hover:var(--secondary-hover);
  --accent-foreground:#0a0a0a;
  --destructive:#dc2626;
  --destructive-hover:#b91c1c;
  --destructive-foreground:#ffffff;

  /* ——— boundaries — restated as black-alpha ——— */
  --border:rgb(0 0 0 / .10);
  --border-strong:rgb(0 0 0 / .16);
  --border-control:rgb(0 0 0 / .15);
  --border-focus:rgb(0 0 0 / .32); /* pushed past .22: black-on-white reads fainter */
  --border-selected:rgb(0 0 0 / .42);
  --edge:rgb(0 0 0 / .06);
  --input:var(--border-control);
  --ring:rgb(0 0 0 / .5); /* 3.98:1 on #ffffff, 3.67:1 on #f5f5f5 */
  --ring-halo:rgb(0 0 0 / .07);
  --black:#0a0a0a;
  --white:#ffffff;
  --selection:rgb(0 0 0 / .16);

  /* ——— glass + surfaces (light) ——— */
  --glass:rgb(0 0 0 / .04);
  --glass-strong:rgb(0 0 0 / .07);
  --surface-card:#f2f2f2;
  --surface-card-emphasis:#fdfdfd;
  --surface-card-quiet:#f5f5f5;
  --surface-overlay:rgb(255 255 255 / .95);
  --surface-header:rgb(255 255 255 / .8);
  --surface-scrim:rgb(0 0 0 / .5);

  /* ——— text ranks (light) ——— */
  --text-primary:var(--neutral-950);
  --text-secondary:rgb(10 10 10 / .78);
  --text-tertiary:rgb(10 10 10 / .55);
  --text-disabled:rgb(10 10 10 / .3);
}