/* ============================================================
   PADDOCK — Design Tokens
   packages/ui/src/tokens の元ネタ。色 / タイポ / spacing / glass。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Type families ---- */
  --font-jp: "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- Type scale (rem, 1rem=16px) ---- */
  --text-xs: 0.75rem;   --lh-xs: 1.45;
  --text-sm: 0.875rem;  --lh-sm: 1.55;
  --text-base: 1rem;    --lh-base: 1.75;
  --text-lg: 1.125rem;  --lh-lg: 1.6;
  --text-xl: 1.25rem;   --lh-xl: 1.45;
  --text-2xl: 1.5rem;   --lh-2xl: 1.3;
  --text-3xl: 1.875rem; --lh-3xl: 1.25;
  --text-4xl: 2.5rem;   --lh-4xl: 1.15;
  --text-5xl: 3.5rem;   --lh-5xl: 1.05;
  --text-6xl: 5rem;     --lh-6xl: 1.0;

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px;

  /* ---- Radius ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 999px;

  /* ---- Light theme (default) ---- */
  --bg:          #FBFAF8;
  --bg-elevated: #FFFFFF;
  --bg-sunken:   #F2F1ED;
  --fg:          #1A1A1F;
  --fg-muted:    #5C5C66;
  --fg-faint:    #8E8E98;
  --border:      #E7E5E0;
  --border-strong:#D6D3CC;
  --accent:      #0E63F4;
  --accent-warm: #E11D48;
  --success: #16A34A; --warning: #D97706; --danger: #DC2626;

  /* ---- Glass (web: 雰囲気だけ。blur + 半透明) ---- */
  --glass-bg: rgba(255,255,255,0.62);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-border: rgba(255,255,255,0.7);
  --glass-blur: 18px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(20,20,28,.06), 0 1px 1px rgba(20,20,28,.04);
  --shadow-md: 0 4px 16px rgba(20,20,28,.08), 0 1px 3px rgba(20,20,28,.05);
  --shadow-lg: 0 18px 48px rgba(20,20,28,.14), 0 4px 12px rgba(20,20,28,.07);
  --shadow-xl: 0 36px 80px rgba(20,20,28,.20), 0 8px 24px rgba(20,20,28,.10);

  /* default oshi (neutral, overridden per character) */
  --oshi:      #0E63F4;
  --oshi-deep: #0A3F9E;
  --oshi-2:    #E11D48;
  --oshi-ink:  #0B1F4A;
  --oshi-tint: rgba(14,99,244,.12);
}

[data-theme="dark"] {
  --bg:          #0B0B0E;
  --bg-elevated: #16161B;
  --bg-sunken:   #060608;
  --fg:          #F4F4F5;
  --fg-muted:    #A6A6B0;
  --fg-faint:    #71717A;
  --border:      #27272A;
  --border-strong:#3A3A40;
  --accent:      #5A92FF;
  --accent-warm: #FB7185;
  --glass-bg: rgba(22,22,27,0.55);
  --glass-bg-strong: rgba(22,22,27,0.78);
  --glass-border: rgba(255,255,255,0.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 22px 56px rgba(0,0,0,.55);
  --shadow-xl: 0 40px 90px rgba(0,0,0,.65);
}

/* ============================================================
   11 OSHI COLOR WORLDS
   各キャラの推し色。[data-oshi="team"] で UI 全体にテーマ反映。
   --oshi      : 主軸の鮮やかな1色（リンク/グロー/縁取り）
   --oshi-deep : 暗いコンパニオン
   --oshi-2    : セカンダリアクセント
   --oshi-ink  : テキスト用の濃色
   --oshi-tint : 12% tint（背景フィル）
   ============================================================ */
[data-oshi="red_bull"]    { --oshi:#1A4BD4; --oshi-deep:#0B1F4A; --oshi-2:#FF1801; --oshi-3:#FFC500; --oshi-ink:#0B1F4A; --oshi-tint:rgba(26,75,212,.12); }
[data-oshi="mclaren"]     { --oshi:#FF6A00; --oshi-deep:#B84400; --oshi-2:#00B5C2; --oshi-3:#1A1A1A; --oshi-ink:#7A3200; --oshi-tint:rgba(255,106,0,.13); }
[data-oshi="ferrari"]     { --oshi:#E11A22; --oshi-deep:#9E0E14; --oshi-2:#C8A04D; --oshi-3:#FFFFFF; --oshi-ink:#7E0C10; --oshi-tint:rgba(225,26,34,.11); }
[data-oshi="mercedes"]    { --oshi:#00B6A8; --oshi-deep:#0A6F67; --oshi-2:#1A1A1A; --oshi-3:#C0C0C0; --oshi-ink:#08443F; --oshi-tint:rgba(0,182,168,.13); }
[data-oshi="aston_martin"]{ --oshi:#1E8A66; --oshi-deep:#0F4F3A; --oshi-2:#1A1A1A; --oshi-3:#FFFFFF; --oshi-ink:#0F4F3A; --oshi-tint:rgba(30,138,102,.13); }
[data-oshi="alpine"]      { --oshi:#0E5BD6; --oshi-deep:#0A3C8C; --oshi-2:#FF3DA6; --oshi-3:#FFFFFF; --oshi-ink:#0A3C8C; --oshi-tint:rgba(14,91,214,.12); }
[data-oshi="williams"]    { --oshi:#2A8AFF; --oshi-deep:#001A66; --oshi-2:#FFFFFF; --oshi-3:#0E4FB8; --oshi-ink:#001A66; --oshi-tint:rgba(42,138,255,.13); }
[data-oshi="racing_bulls"]{ --oshi:#1648B5; --oshi-deep:#0E2E73; --oshi-2:#00A86B; --oshi-3:#FFFFFF; --oshi-ink:#0E2E73; --oshi-tint:rgba(22,72,181,.12); }
[data-oshi="haas"]        { --oshi:#E11D48; --oshi-deep:#1A1A1A; --oshi-2:#1A1A1A; --oshi-3:#FFFFFF; --oshi-ink:#1A1A1A; --oshi-tint:rgba(225,29,72,.11); }
[data-oshi="audi"]        { --oshi:#D11C42; --oshi-deep:#3F4147; --oshi-2:#3F4147; --oshi-3:#FFFFFF; --oshi-ink:#2A2C31; --oshi-tint:rgba(209,28,66,.10); }
[data-oshi="cadillac"]    { --oshi:#16356E; --oshi-deep:#0B1F4A; --oshi-2:#B7912E; --oshi-3:#C0C0C0; --oshi-ink:#0B1F4A; --oshi-tint:rgba(22,53,110,.12); }

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--oshi); outline-offset: 2px; }

/* numeric / latin runs use Inter for crispness */
.num, .en { font-family: var(--font-en); font-feature-settings: "tnum" 1; }
.mono { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}