/* ============================================================
   BitTool.ai — Design Tokens
   Semantic tokens only. Components must reference these,
   never raw color values. Theme switching = [data-theme] swap.
   ============================================================ */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

:root {
  /* ---------- Typography ---------- */
  --font-sans: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei',
    'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Malgun Gothic', 'Noto Sans KR',
    system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', SFMono-Regular, ui-monospace,
    Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-base: 0.875rem; /* 14 */
  --text-md: 0.9375rem;  /* 15 */
  --text-lg: 1.0625rem;  /* 17 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 2rem;      /* 32 */
  --text-4xl: 2.75rem;   /* 44 */
  --text-5xl: 3.5rem;    /* 56 */

  /* ---------- Geometry ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 300ms;

  /* ---------- Layout ---------- */
  --sidebar-w: 280px;
  --composer-max-w: 780px;
  --content-max-w: 1120px;

  /* ---------- Brand (theme-independent) ---------- */
  --brand-a: #5B5BD6;
  --brand-b: #26C6DA;
  --brand-gradient: linear-gradient(135deg, #6366F1 0%, #22D3EE 100%);
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg: #F7F7F5;            /* app canvas — warm off-white */
  --bg-deep: #F1F1EE;       /* recessed areas */
  --surface: #FFFFFF;       /* cards, panels */
  --surface-2: #F4F4F2;     /* nested surface, hover fills */
  --surface-3: #ECECE9;     /* pressed / selected fills */
  --overlay: rgba(23, 23, 26, 0.44);

  --text: #1C1C21;
  --text-2: #5B5B66;
  --text-3: #8F8F99;
  --text-invert: #FFFFFF;

  --border: #E5E5E1;
  --border-strong: #D6D6D1;
  --border-focus: #5B5BD6;

  --accent: #5B5BD6;
  --accent-hover: #4F4FC4;
  --accent-active: #4646AE;
  --accent-soft: rgba(91, 91, 214, 0.09);
  --accent-soft-2: rgba(91, 91, 214, 0.16);
  --accent-text: #4F4FC4;

  --danger: #DC3D43;
  --danger-hover: #C63339;
  --danger-soft: rgba(220, 61, 67, 0.09);
  --success: #299764;
  --success-soft: rgba(41, 151, 100, 0.10);
  --warning: #B27C22;
  --warning-soft: rgba(214, 157, 66, 0.14);
  --info: #2E7DD1;
  --info-soft: rgba(46, 125, 209, 0.10);

  --shadow-sm: 0 1px 2px rgba(20, 20, 24, 0.05);
  --shadow-md: 0 2px 8px rgba(20, 20, 24, 0.06), 0 1px 2px rgba(20, 20, 24, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 20, 24, 0.12), 0 2px 8px rgba(20, 20, 24, 0.06);
  --shadow-xl: 0 24px 64px rgba(20, 20, 24, 0.18), 0 4px 12px rgba(20, 20, 24, 0.08);

  --scrollbar-thumb: rgba(28, 28, 33, 0.18);
  --code-bg: #F4F4F2;
  --kbd-bg: #FFFFFF;
  --selection: rgba(91, 91, 214, 0.18);
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0E0E11;
  --bg-deep: #0A0A0C;
  --surface: #17171B;
  --surface-2: #1E1E24;
  --surface-3: #26262E;
  --overlay: rgba(8, 8, 10, 0.6);

  --text: #ECECEF;
  --text-2: #A3A3AD;
  --text-3: #6F6F7A;
  --text-invert: #17171B;

  --border: #26262C;
  --border-strong: #34343C;
  --border-focus: #7B79F0;

  --accent: #7B79F0;
  --accent-hover: #8D8BF4;
  --accent-active: #9C9AF6;
  --accent-soft: rgba(123, 121, 240, 0.13);
  --accent-soft-2: rgba(123, 121, 240, 0.22);
  --accent-text: #A2A0F8;

  --danger: #EB5E63;
  --danger-hover: #F07379;
  --danger-soft: rgba(235, 94, 99, 0.13);
  --success: #3DBD7D;
  --success-soft: rgba(61, 189, 125, 0.13);
  --warning: #D9A452;
  --warning-soft: rgba(217, 164, 82, 0.15);
  --info: #5AA7E8;
  --info-soft: rgba(90, 167, 232, 0.13);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);

  --scrollbar-thumb: rgba(236, 236, 239, 0.16);
  --code-bg: #1E1E24;
  --kbd-bg: #26262E;
  --selection: rgba(123, 121, 240, 0.3);
}