/* Eiguru's named colours, text sizes and spacing. The one place any of them is written.
   Source of truth: designs/eiguru.pen, palette frame btjZy, copied into .claude/CLAUDE.md.
   tools/test/styles.test.ts checks every value here against CLAUDE.md's tables and refuses a
   colour typed anywhere else, so this file and that doc can never drift apart unseen.

   This file is copied byte for byte to apps/site/public/tokens.css, because the marketing
   placeholder has no build step and cannot import anything. The check compares the two.
   When item 9 rebuilds the marketing site with a build step, the copy goes away. */
:root {
  /* Neutrals */
  --bg: #f6f9f8;
  --surface: #ffffff;
  --surface-subtle: #eef2f1;
  --border: #dee4e3;
  /* Form-field edges use control-border, never border: border is 1.29:1 (compliance C66). */
  --control-border: #7b8684;
  --text-primary: #15191a;
  --text-secondary: #5f6a69;
  --text-placeholder: #646e6c;
  --text-disabled: #9ea8a6;

  /* Asagi, the one brand colour. As text use primary-strong, never primary (compliance C66). */
  --primary: #0f7f89;
  --primary-hover: #0a5f67;
  --primary-strong: #0a5f67;
  --primary-subtle: #e8f5f6;
  --primary-tint: #cfebee;
  --on-primary-subtle: #0a5f67;
  --text-on-primary: #ffffff;

  /* Status. Solid colours are for shapes, never text or icons; icons use the on-*-tint colour. */
  --success: #5ba84a;
  --success-tint: #e0f1db;
  --on-success-tint: #36742b;
  --warning: #f2b33d;
  --warning-tint: #fbeed2;
  --on-warning-tint: #8a6414;
  --error: #de4e47;
  --error-tint: #fadddb;
  --on-error-tint: #a33832;
  --text-error: #a33832;
  --error-strong: #ce4038;

  /* Dark surfaces inside a light page */
  --inverse-surface: #283030;
  --text-on-inverse: #f6f9f8;
  --primary-on-inverse: #9cd6db;

  /* Sango. Marketing site only, decorative only, never status (.claude/CLAUDE.md). */
  --marketing-accent: #f26e5f;
  --marketing-accent-tint: #fde3de;
  --on-marketing-accent-tint: #b23d2f;

  /* Text sizes, in rem so they follow the reader's own text setting. Never set a size on
     html itself: that takes the setting away, and the robot's doubled-text run would then
     pass having proved nothing (testing.md, "Robot checks").
     16 px is the floor for body, fields and buttons; 14 px only for footnotes and tight
     spaces, never smaller; reading line height at least 1.5 (compliance C65). */
  /* xs is footnote text, and still reading text: its line height has the same 1.5 floor as
     the others. From --leading-xl up the line heights are for headings only, where tighter is
     right; never put one on a paragraph (compliance C65). */
  --text-xs: 0.875rem;
  --leading-xs: 1.5;
  --text-base: 1rem;
  --leading-base: 1.6;
  --text-lg: 1.125rem;
  --leading-lg: 1.6;
  --text-xl: 1.25rem;
  --leading-xl: 1.4;
  --text-2xl: 1.5rem;
  --leading-2xl: 1.35;
  --text-3xl: 1.875rem;
  --leading-3xl: 1.3;
  --text-4xl: 2.25rem;
  --leading-4xl: 1.25;
  /* Marketing reading text: the Digital Agency's guidance puts 1.7–1.75 under 心理的負荷の軽減. */
  --leading-relaxed: 1.75;
  /* Dense staff tables only, and they must still pass WCAG 1.4.12 (compliance C65). */
  --leading-table: 1.3;

  /* About 40 全角 characters a line, which compliance C65 asks for. In em, not ch: ch is the
     width of a "0" (about 0.67em here), so 40ch would be nearer 27 全角.
     Being in em, it means 40 characters of the element's own size. That is what reading text
     wants, so put it on a container or on body text — never on a heading, where it would allow
     40 heading-sized characters and so a far longer line than a heading should have. */
  --measure: 40em;

  /* Spacing, in rem on a 4 px step. The name is the size at the normal text setting. */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;

  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-pill: 999px;

  /* Tap targets stay in px on purpose: in rem, a reader on "very small" text would shrink a
     44 px button to 25 px, breaking the rule the token exists to keep (compliance C65). */
  --tap-min: 44px;
  --focus-width: 2px;

  /* One list for both the app and the marketing site. Noto Sans JP comes first: we serve it
     ourselves from /fonts/ (compliance C14 forbids loading a font from anyone else), and the
     rest is what a reader sees until it arrives, or for good if it ever fails to load.
     "Segoe UI" is deliberately absent: it carries no Japanese letters, so naming it made
     Japanese Windows fall through to the thinnest face it has. BIZ UDPGothic is a Universal
     Design face that ships with Japanese Windows and falls through where it is missing. */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo,
    "Yu Gothic Medium", "Yu Gothic", YuGothic, "Noto Sans CJK JP", system-ui, sans-serif;

  /* Light only, declared so the browser does not style form fields, scroll bars and autofill
     dark against our light cards on a phone set to dark mode. */
  color-scheme: light;
}

/* The dark half of the palette, written down and shown to nobody.
   Nothing sets data-theme, so this block never applies. It is here because the roadmap asks
   for the palette "light and dark" in code and compliance C66 covers both themes, so the
   colour check can measure the dark pairs. Before it is ever switched on, the logo needs a
   pale version: today's is near-black ink on a see-through background and would vanish.
   The design principles rule dark mode out for clients (they are inside LINE) and leave it
   for the accountant app "only if asked". */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    --bg: #101516;
    --surface: #17201f;
    --surface-subtle: #202a2a;
    --border: #263031;
    --control-border: #7b8684;
    --text-primary: #eef3f2;
    --text-secondary: #9ea8a6;
    --text-placeholder: #9ea8a6;
    --text-disabled: #7b8684;

    --primary: #0f7f89;
    --primary-hover: #2e98a2;
    --primary-strong: #2e98a2;
    --primary-subtle: #12323a;
    --primary-tint: #17454a;
    --on-primary-subtle: #9cd6db;

    --success-tint: #1a3320;
    --on-success-tint: #8fd07e;
    --warning-tint: #3a2e14;
    --on-warning-tint: #f2c46b;
    --error-tint: #3e1f1f;
    --on-error-tint: #f08d86;
    --text-error: #f08d86;

    --inverse-surface: #eef3f2;
    --text-on-inverse: #15191a;
    --primary-on-inverse: #0a5f67;

    --marketing-accent-tint: #3f221e;
    --on-marketing-accent-tint: #f26e5f;

    color-scheme: dark;
  }
}