/* css/tokens.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Palette */
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #f7f9ff;
  --muted: #eef2f7;

  --text: #0f172a;       /* slate-900 */
  --text-2: #1e293b;     /* slate-800 */
  --sub: #64748b;        /* slate-500 */

  --brand: #3a74ff;
  --brand-2: #174de1;
  --good: #16a34a;
  --warn: #b45309;
  --danger: #e11d48;

  --border: #e5e9f2;
  --ring: #2a5fff;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(16,24,40,.05);
  --shadow:    0 10px 24px rgba(16,24,40,.08), 0 2px 8px rgba(16,24,40,.04);
  --shadow-lg: 0 14px 40px rgba(16,24,40,.10), 0 3px 10px rgba(16,24,40,.06);

  /* Rings */
  --ring-soft: 0 0 0 6px rgba(42,95,255,.10);

  /* Type scale */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .88rem;
  --fs-md: .98rem;       /* default text */
  --fs-lg: 1.1rem;
  --fs-xl: 1.35rem;

  /* Controls */
  --ctl-h: 36px;
  --ctl-padx: 12px;

  /* Gradients */
  --g-card: linear-gradient(180deg, var(--surface), var(--surface-2));
  --g-chip: linear-gradient(180deg, var(--surface-2), var(--surface));
  --g-page: radial-gradient(900px 500px at 20% -10%, rgba(58,116,255,.10), transparent 60%),
            radial-gradient(700px 380px at 110% 0%, rgba(48,196,255,.10), transparent 55%),
            linear-gradient(180deg, #f9fbff 0%, #f4f7fc 100%);
}

[data-theme="dark"] {
  --bg: #0b0c0f;
  --surface: #0f1218;
  --surface-2: #121725;
  --muted: #182033;

  --text: #eaf0f8;
  --text-2: #c7d2df;
  --sub: #98a6b5;

  --brand: #6ea8fe;
  --brand-2: #4b82f9;
  --good: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;

  --border: #20283a;
  --ring: #4f7cff;

  --g-card: linear-gradient(180deg, var(--surface), var(--surface-2));
  --g-chip: linear-gradient(180deg, var(--surface-2), var(--surface));
  --g-page: linear-gradient(180deg, #0b0c0f, #0e1118);
}