/* Kaishin Design System v3 — tokens (2026-11-08)
   Structure, type scale, shape, spacing and layout modelled on fly.io's visual language;
   colours are Kaishin's own (ink, paper, cream, mist, gold). See references/brand-guide.md. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Bricolage+Grotesque:opsz,wght@12..96,300..700&family=Cormorant+Garamond:wght@300&family=Shippori+Mincho:wght@400&display=swap");

/* ---------- Paper theme (light, default) ---------- */
:root, [data-theme="light"] {
  /* Brand constants (never change between themes) */
  --brand-ink: #0d0d0d;
  --brand-paper: #fdfaf5;
  --brand-cream: #f5f0e8;
  --brand-mist: #e8e2d6;
  --brand-gold: #b8975a;
  --brand-gold-mid: #a3844c;
  --brand-gold-light: #d4b882;
  --brand-gold-deep: #80653a;

  /* Surfaces — fly roles: canvas / canvas-card / canvas-dark */
  --surface: #f5f0e8;            /* page canvas (cream) */
  --surface-raised: #fdfaf5;     /* cards, nav, panels, secondary buttons (paper) */
  --surface-alt: #fdfaf5;        /* a lighter band when a section needs to lift */
  --surface-contrast: #0d0d0d;   /* the dark band (closing band, tech/logo band) */

  /* Text */
  --text: #0d0d0d;               /* headings and body (17:1+) */
  --text-muted: #5e584f;         /* secondary copy, footer links, captions (6.2:1 on cream) */
  --text-on-contrast: #fdfaf5;
  --text-on-contrast-muted: #a39f98;

  /* Gold, by job */
  --accent: #b8975a;             /* THE one filled CTA per view */
  --accent-hover: #a3844c;       /* CTA hover/pressed (ink on it 5.5:1) */
  --on-accent: #0d0d0d;          /* text on gold (7:1) */
  --accent-graphic: #a3844c;     /* small icons, list markers, chart series 1 (3.1:1) */
  --accent-text: #80653a;        /* inline links, small gold text (4.8:1 cream, 5.3:1 paper) */
  --accent-emphasis: #a3844c;    /* the italic phrase in a headline, display sizes only */
  --accent-on-contrast: #d4b882; /* any gold inside the dark band (10:1) */

  /* Lines — the hairline is the structural voice of the system */
  --line: #e8e2d6;               /* every card edge, divider, nav/footer rule */
  --line-strong: #8f826c;        /* input and control borders (3.3:1) */
  --line-on-contrast: #2e2a24;
  --focus: #80653a;

  /* Gilded glow — replaces fly's rainbow. Radial, low opacity, behind art only */
  --glow-1: #d4b882;  /* champagne */
  --glow-2: #b8975a;  /* gold */
  --glow-3: #e8e2d6;  /* mist */
  --glow-4: #80653a;  /* deep gold */
  --glow-gilded:
    radial-gradient(40% 55% at 25% 45%, rgba(212,184,130,.45), transparent 70%),
    radial-gradient(35% 50% at 70% 40%, rgba(184,151,90,.28), transparent 70%),
    radial-gradient(45% 60% at 55% 75%, rgba(232,226,214,.9), transparent 70%),
    radial-gradient(30% 40% at 85% 70%, rgba(128,101,58,.14), transparent 70%);

  /* Depth: hairline first, shadow rarely */
  --shadow-soft: 0 1px 2px rgba(13,13,13,.04), 0 8px 24px rgba(13,13,13,.06);
  --shadow-overlay: 0 12px 32px rgba(13,13,13,.12);
  --text-glow-contrast: 0 0 40px rgba(184,151,90,.18);

  /* Product UI status (apps and dashboards only) */
  --success: #36704a; --success-soft: #e9f1e8;
  --warning: #8b5e10; --warning-soft: #f7eedb;
  --danger:  #a8382a; --danger-soft:  #f7e6e2;
  --info:    #3d5f8a; --info-soft:    #e6ecf4;

  /* Charts, in order */
  --chart-1: #a3844c; --chart-2: #3d5f8a; --chart-3: #5b8a72; --chart-4: #6f6390; --chart-5: #c0704a;

  color-scheme: light;
}

/* ---------- Ink theme (dark mode of the site and apps) ---------- */
[data-theme="dark"] {
  --surface: #0d0d0d; --surface-raised: #161513; --surface-alt: #1c1a17; --surface-contrast: #24201b;
  --text: #fdfaf5; --text-muted: #a39f98; --text-on-contrast: #fdfaf5; --text-on-contrast-muted: #a39f98;
  --accent: #b8975a; --accent-hover: #c6a86f; --on-accent: #0d0d0d;
  --accent-graphic: #d4b882; --accent-text: #d4b882; --accent-emphasis: #d4b882; --accent-on-contrast: #d4b882;
  --line: #2e2a24; --line-strong: #736c62; --line-on-contrast: #3a352d; --focus: #d4b882;
  --glow-gilded:
    radial-gradient(40% 55% at 25% 45%, rgba(212,184,130,.18), transparent 70%),
    radial-gradient(35% 50% at 70% 40%, rgba(184,151,90,.14), transparent 70%),
    radial-gradient(30% 40% at 85% 70%, rgba(128,101,58,.18), transparent 70%);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-overlay: 0 12px 32px rgba(0,0,0,.55);
  --success: #7fbf8f; --success-soft: #1a2a1f; --warning: #e0b25a; --warning-soft: #2c2414;
  --danger: #e8806e; --danger-soft: #2e1a17; --info: #8fb0d9; --info-soft: #17202c;
  --chart-1: #d4b882; --chart-2: #8fb0d9; --chart-3: #8cc0a5; --chart-4: #a99bd0; --chart-5: #e09a76;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0d0d0d; --surface-raised: #161513; --surface-alt: #1c1a17; --surface-contrast: #24201b;
    --text: #fdfaf5; --text-muted: #a39f98; --text-on-contrast: #fdfaf5; --text-on-contrast-muted: #a39f98;
    --accent: #b8975a; --accent-hover: #c6a86f; --on-accent: #0d0d0d;
    --accent-graphic: #d4b882; --accent-text: #d4b882; --accent-emphasis: #d4b882; --accent-on-contrast: #d4b882;
    --line: #2e2a24; --line-strong: #736c62; --line-on-contrast: #3a352d; --focus: #d4b882;
    --glow-gilded:
      radial-gradient(40% 55% at 25% 45%, rgba(212,184,130,.18), transparent 70%),
      radial-gradient(35% 50% at 70% 40%, rgba(184,151,90,.14), transparent 70%),
      radial-gradient(30% 40% at 85% 70%, rgba(128,101,58,.18), transparent 70%);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-overlay: 0 12px 32px rgba(0,0,0,.55);
    --success: #7fbf8f; --success-soft: #1a2a1f; --warning: #e0b25a; --warning-soft: #2c2414;
    --danger: #e8806e; --danger-soft: #2e1a17; --info: #8fb0d9; --info-soft: #17202c;
    --chart-1: #d4b882; --chart-2: #8fb0d9; --chart-3: #8cc0a5; --chart-4: #a99bd0; --chart-5: #e09a76;
    color-scheme: dark;
  }
}

/* ---------- Theme-independent tokens ---------- */
:root {
  /* Families */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;   /* stand-in for fly's Mackinac */
  --font-display-axes: "SOFT" 50, "WONK" 0;                          /* soft, calm serif; never wonky */
  --font-sans: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; /* fly's body family */
  --font-wordmark: "Cormorant Garamond", Garamond, Georgia, serif; /* logo only */
  --font-kanji: "Shippori Mincho", "Noto Serif JP", serif;         /* 会心 only */

  /* Spacing (4px base, 32px rhythm, 128px bands) */
  --space-xxs: 4px; --space-xs: 8px; --space-sm: 10px; --space-md: 12px; --space-base: 16px;
  --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 64px; --space-band: 128px;

  /* Containers */
  --container: 1200px;
  --measure-hero: 660px;
  --measure-text: 640px;

  /* Radii */
  --radius-none: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px;
  --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms;
}

/* ---------- Type styles ---------- */
.display-xl, .display-lg, .display-md { font-family: var(--font-display); font-variation-settings: var(--font-display-axes); font-weight: 500; color: var(--text); text-wrap: balance; }
.display-xl { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); line-height: 1.15; letter-spacing: -0.045em; }
.display-lg { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: 1.325; letter-spacing: -0.025em; }
.display-md { font-size: 1.375rem; line-height: 1.325; letter-spacing: -0.025em; }
.display-xl em, .display-lg em, .display-md em { font-style: italic; color: var(--accent-emphasis); }
.body-lg        { font-family: var(--font-sans); font-size: 1.1875rem; line-height: 1.5; font-weight: 325; }
.body-lg-strong { font-family: var(--font-sans); font-size: 1.1875rem; line-height: 1.5; font-weight: 450; }
.body-md        { font-family: var(--font-sans); font-size: 1.125rem;  line-height: 1.5; font-weight: 325; }
.body-sm        { font-family: var(--font-sans); font-size: 0.96875rem; line-height: 1.5; font-weight: 450; }
.nav-link-text  { font-family: var(--font-sans); font-size: 0.90625rem; line-height: 1.5; font-weight: 450; }
.button-text    { font-family: var(--font-sans); font-size: 0.90625rem; line-height: 1.5; font-weight: 500; }
.eyebrow        { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.5; font-weight: 575; letter-spacing: 0.05em; text-transform: uppercase; }
.label          { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; }
.caption        { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.5; font-weight: 400; color: var(--text-muted); }
.kanji          { font-family: var(--font-kanji); font-size: 2rem; line-height: 1; font-weight: 400; }