/* ═══════════════════════════════════════════════════════════════════════
   core.tokens.css
   ─────────────────────────────────────────────────────────────────────
   SYNCED FROM the live Chatarot Design System.
   Source of truth:  Tarot3d1.4/design-system/colors_and_type.css
   ─────────────────────────────────────────────────────────────────────
   This file is a verbatim re-export so that the Reading Echo extension
   renders standalone (offline previews, agent skills, designer tools).

   ⚠ In production, do NOT @import this file.
     Reference the live core system directly:
       <link rel="stylesheet" href="/design-system/colors_and_type.css">

   This file ships ONLY core foundation tokens. No --ct-* tokens, no
   Reading Echo additions. Those live in reading-echo.tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  /* COLOR · BACKGROUNDS */
  --bg-cosmic:       #000000;
  --bg-content:      #08090c;
  --bg-surface:      #12141a;
  --bg-surface-2:    #181b22;
  --bg-glass:        rgba(18, 20, 26, 0.72);
  --bg-glass-strong: rgba(8, 9, 12, 0.84);
  --backdrop-blur:   blur(20px) saturate(1.1);

  /* COLOR · TEXT */
  --text-primary:    #ECE9E1;
  --text-secondary:  rgba(236, 233, 225, 0.62);
  --text-subtle:     rgba(236, 233, 225, 0.38);
  --text-faint:      rgba(236, 233, 225, 0.22);
  --text-mono:       #B8BAC0;

  /* COLOR · BORDERS */
  --border-hairline: rgba(236, 233, 225, 0.08);
  --border-subtle:   rgba(236, 233, 225, 0.16);
  --border-active:   rgba(236, 233, 225, 0.40);
  --border-strong:   rgba(236, 233, 225, 0.64);

  /* COLOR · ACCENT */
  --accent-ivory:    #ECE9E1;
  --accent-signal:   #C9A66B;
  --accent-warning:  #D96B5C;
  --accent-success:  #8AA67A;
  --accent-link:     #ECE9E1;

  /* COLOR · GLOW */
  --glow-subtle:   0 0 16px rgba(236, 233, 225, 0.06);
  --glow-halo:     0 0 32px rgba(236, 233, 225, 0.10);
  --glow-signal:   0 0 24px rgba(201, 166, 107, 0.18);
  --glow-warning:  0 0 24px rgba(217, 107, 92, 0.22);

  /* TYPE */
  --font-sans: 'Inter', 'Noto Sans SC', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --t-display-size: 48px;  --t-display-lh: 1.1;  --t-display-w: 200; --t-display-tracking: -0.01em;
  --t-h1-size:      32px;  --t-h1-lh:      1.2;  --t-h1-w:      400; --t-h1-tracking:      -0.005em;
  --t-h2-size:      24px;  --t-h2-lh:      1.3;  --t-h2-w:      400; --t-h2-tracking:       0;
  --t-body-size:    16px;  --t-body-lh:    1.6;  --t-body-w:    400; --t-body-tracking:     0;
  --t-caption-size: 13px;  --t-caption-lh: 1.4;  --t-caption-w: 400; --t-caption-tracking:  0;
  --t-micro-size:   11px;  --t-micro-lh:   1.4;  --t-micro-w:   500; --t-micro-tracking:    0.10em;

  /* SPACE / RADIUS / SHADOW */
  --space-0: 0;   --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px;--space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 64px;--space-9: 96px;

  --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px;

  --shadow-modal:   0 24px 64px rgba(0, 0, 0, 0.72);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.56);

  /* MOTION (core) */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quiet:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-exit:      cubic-bezier(0.4, 0.0, 1, 1);
  --dur-instant: 150ms;
  --dur-fast:    300ms;
  --dur-base:    400ms;
  --dur-slow:    700ms;
  --dur-cross:   600ms;

  /* LAYOUT */
  --measure: 65ch;
  --content-max: 1080px;
  --gutter: 24px;
  --tap-min: 44px;
}

/* BASE */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg-cosmic);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-w);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

h1, .t-h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); font-weight: var(--t-h1-w); letter-spacing: var(--t-h1-tracking); margin: 0; }
h2, .t-h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); font-weight: var(--t-h2-w); letter-spacing: var(--t-h2-tracking); margin: 0; }
h3, .t-h3 { font-size: 18px; line-height: 1.4; font-weight: 500; margin: 0; }
p          { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--t-body-w); margin: 0; text-wrap: pretty; max-width: var(--measure); }

hr { height: 1px; border: 0; margin: 0; background: var(--border-hairline); }

a { color: var(--accent-link); text-decoration: none; border-bottom: 1px solid var(--border-subtle); transition: border-color var(--dur-fast) var(--ease-quiet); }
a:hover { border-bottom-color: var(--border-active); }
::selection { background: rgba(236, 233, 225, 0.18); color: var(--text-primary); }
:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 2px; }