/* main/frontend/ui/design-system/src/styles/kit-tokens.css */

/**
 * The House's design system (founder, 2026-10-26: ref #62, "Ganbate UI design system · Yozakura
 * House"), as tokens: its palette, its type roles, its spacing and radius scales. kit.css draws
 * every component from these; nothing in the kit names a colour or a size of its own.
 */

:root {
  /* 01 Colour palette */
  --house-midnight: #0b1426;
  --house-navy: #111e3a;
  /* The refs' night (#70, #79, #80): near-black with a warm cast, under the lanterns. */
  --house-night: #120f15;
  --house-gold: #d4af37;
  --house-gold-light: #f6e3a1;
  --house-sakura: #f6a7c1;
  --house-burgundy: #7a0f24;
  --house-burgundy-lit: #a82a43;
  --house-emerald: #0f6b4f;
  --house-blue: #d4af66;
  --house-text: #f9f6e7;
  --house-text-2: #a7b1c6;
  --house-text-3: #8c96a9;
  --house-text-4: #6b758a;

  /* 02 Typography: Plus Jakarta Sans + Pretendard across display lines, titles, buttons and copy. */
  --house-font-caps: var(--ui-font-family-caps);
  --house-display-size: clamp(1.625rem, 4.5vw, 2.375rem);
  --house-display-tracking: 0.1em;
  --house-title-size: clamp(1.25rem, 2vw, 1.375rem);
  --house-section-size: clamp(0.9375rem, 1.5vw, 1rem);
  --house-section-tracking: 0.06em;
  --house-body-size: 0.875rem;
  --house-secondary-size: 0.8125rem;
  --house-caption-size: 0.75rem;
  --house-micro-size: 0.6875rem;

  /* 03 Spacing (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64) and corner radii (4 · 8 · 12 · 16 · 24) */
  --house-space-1: 0.25rem;
  --house-space-2: 0.5rem;
  --house-space-3: 0.75rem;
  --house-space-4: 1rem;
  --house-space-5: 1.5rem;
  --house-space-6: 2rem;
  --house-space-7: 3rem;
  --house-space-8: 4rem;
  --house-radius-1: 0.25rem;
  --house-radius-2: 0.5rem;
  --house-radius-3: 0.75rem;
  --house-radius-4: 1rem;
  --house-radius-5: 1.5rem;

  /* 05 Buttons v3 (founder, 2026-10-27: refs #76 Raise To · Fold, #77 Play Again · Back to Lobby):
     chamfered plates in a double frame; the main action dark bronze glowing warm at its centre
     inside a bright gold edge, the second deep navy in a dim gold one, danger deep crimson on a
     red-gold edge. */
  --house-bronze-light: #a4732f;
  --house-bronze: #7d5622;
  --house-bronze-deep: #4a3720;
  --house-bronze-edge: #e6bd6a;
  --house-crimson: #481719;
  --house-crimson-deep: #36110f;
  --house-button-chamfer: 0.375rem;
  --house-button-radius: 0.5625rem;

  /* #67's signal colours: what went right, what to watch, what to know, and what went wrong. */
  --house-success: #4ade80;
  --house-warning: #f5a524;
  --house-info: #e8c97a;
  --house-danger: #e4585b;

  /* Presence and status (§11, §13), as #62 colours its dots. */
  --house-status-online: #3fc58a;
  --house-status-in-game: var(--house-gold);
  --house-status-busy: #e0465b;
  --house-status-offline: var(--house-text-4);

  /* The materials the components share, built from the palette. */
  --house-line: color-mix(in srgb, var(--house-gold) 44%, transparent);
  --house-line-soft: color-mix(in srgb, var(--house-gold) 22%, transparent);
  --house-rule-fade: linear-gradient(90deg, transparent, rgb(214 179 106 / 42%) 50%, transparent);
  --house-rule-fade-soft: linear-gradient(
    90deg,
    transparent,
    rgb(214 179 106 / 24%) 50%,
    transparent
  );
  --house-rule-fade-v: linear-gradient(
    180deg,
    transparent,
    rgb(214 179 106 / 34%) 50%,
    transparent
  );
  --house-gold-fill: radial-gradient(120% 100% at 50% 0%, #f6e3a1 0%, #d4a64a 55%, #9e7328 100%);
  --house-glow: 0 0 1rem rgb(212 175 102 / 32%);
  --house-panel: radial-gradient(
    92% 72% at 50% 0%,
    rgb(26 43 74 / 95%) 0%,
    rgb(13 22 42 / 96%) 58%,
    rgb(10 17 32 / 97%) 100%
  );
  --house-glass: color-mix(in srgb, var(--house-midnight) 58%, transparent);
  --house-well: linear-gradient(180deg, rgb(9 15 28 / 90%), rgb(13 22 41 / 84%));
}