/* ============================================================
   Volt React Design System — colors + type
   Adapted from @epilot/volt-ui-react (Tailwind v4 / Radix-style
   12-step scales). Use light values under :root, dark values
   under .dark or [data-theme="dark"].
   ============================================================ */

@font-face {
  src: url("fonts/geist-variable.woff2") format("woff2");
  font-family: "Geist";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root,
.light,
[data-theme="light"] {
  /* ---- Surfaces / body -------------------------------------- */
  --volt-body: #ffffff;
  --volt-level-1: #ffffff;
  --volt-level-2: #faf9fb;
  --volt-level-3: #f2eff3;

  /* ---- Brand accent (epilot blue) --------------------------- */
  --volt-accent-1:  #fcfdfe;
  --volt-accent-2:  #f6fafe;
  --volt-accent-3:  #ebf3fd;
  --volt-accent-4:  #dcebfe;
  --volt-accent-5:  #cbe1fe;
  --volt-accent-6:  #b6d5fc;
  --volt-accent-7:  #9dc3f2;
  --volt-accent-8:  #7aabe7;
  --volt-accent-9:  #005eb4; /* brand blue */
  --volt-accent-10: #004fa3;
  --volt-accent-11: #0f65bc;
  --volt-accent-12: #113157;
  --volt-accent-contrast: #ffffff;
  --volt-accent-surface:   #f4f9fecc;
  --volt-accent-indicator: #005eb4;
  --volt-accent-track:     #005eb4;

  /* ---- Neutral (mauve/gray) --------------------------------- */
  --volt-gray-1:  #fdfcfd;
  --volt-gray-2:  #faf9fb;
  --volt-gray-3:  #f2eff3;
  --volt-gray-4:  #eae7ec;
  --volt-gray-5:  #e3dfe6;
  --volt-gray-6:  #dbd8e0;
  --volt-gray-7:  #d0cdd7;
  --volt-gray-8:  #bcbac7;
  --volt-gray-9:  #8e8c99;
  --volt-gray-10: #84828e;
  --volt-gray-11: #65636d;
  --volt-gray-12: #211f26;
  --volt-gray-contrast: #ffffff;
  --volt-gray-surface:   #ffffffcc;

  /* ---- Semantic ------------------------------------------- */
  --volt-success-3: #e6f6eb;  --volt-success-9: #30a46c;
  --volt-success-11:#218358;  --volt-success-12:#193b2d;
  --volt-success-contrast:#fff;

  --volt-warning-3: #ffefd6;  --volt-warning-9: #f76b15;
  --volt-warning-11:#cc4e00;  --volt-warning-12:#582d1d;
  --volt-warning-contrast:#fff;

  --volt-error-3:   #feebec;  --volt-error-9:   #e5484d;
  --volt-error-11:  #ce2c31;  --volt-error-12:  #641723;
  --volt-error-contrast:#fff;

  --volt-info-3:    #e6f4fe;  --volt-info-9:    #0090ff;
  --volt-info-11:   #0d74ce;  --volt-info-12:   #113264;
  --volt-info-contrast:#fff;

  /* ---- Semantic aliases for fg/bg --------------------------- */
  --fg-1: var(--volt-gray-12);
  --fg-2: var(--volt-gray-11);
  --fg-3: var(--volt-gray-10);
  --fg-muted: var(--volt-gray-9);
  --fg-disabled: var(--volt-gray-8);
  --fg-accent: var(--volt-accent-11);
  --fg-error:  var(--volt-error-11);

  --bg-1: var(--volt-level-1);
  --bg-2: var(--volt-gray-2);
  --bg-3: var(--volt-gray-3);
  --bg-hover: var(--volt-gray-4);

  --border-subtle: var(--volt-gray-5);
  --border:        var(--volt-gray-6);
  --border-strong: var(--volt-gray-7);
}

.dark,
[data-theme="dark"] {
  --volt-body: #121212;
  --volt-level-1: #1a191b;
  --volt-level-2: #232225;
  --volt-level-3: #2b292d;

  --volt-accent-1:  #07121f;
  --volt-accent-2:  #0b1929;
  --volt-accent-3:  #002650;
  --volt-accent-9:  #005eb4;
  --volt-accent-10: #00509d;
  --volt-accent-11: #71b8ff;
  --volt-accent-12: #c5e4ff;
  --volt-accent-contrast:#ffffff;

  --volt-gray-1:  #121113;
  --volt-gray-2:  #1a191b;
  --volt-gray-3:  #232225;
  --volt-gray-9:  #6f6d78;
  --volt-gray-11: #b5b2bc;
  --volt-gray-12: #eeeef0;

  --fg-1: var(--volt-gray-12);
  --fg-2: var(--volt-gray-11);
  --fg-3: var(--volt-gray-10);
  --bg-1: var(--volt-body);
  --bg-2: var(--volt-level-1);
  --bg-3: var(--volt-level-2);
}

/* ============================================================
   TYPOGRAPHY
   Geist is the single typeface — variable weights 100–900.
   Scale mirrors the library's `textVariants` (Text component).
   ============================================================ */
:root {
  --volt-font-geist: "Geist", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --volt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Type scale */
  --text-xs:   0.75rem;  /* 12 */
  --text-sm:   0.875rem; /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg:   1.125rem; /* 18 */
  --text-xl:   1.25rem;  /* 20 */
  --text-2xl:  1.5rem;   /* 24 */
  --text-3xl:  1.875rem; /* 30 */

  /* Tracking */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;

  /* Radii */
  --radius-xs: 0.125rem; /* 2  */
  --radius-sm: 0.25rem;  /* 4  */
  --radius-md: 0.5rem;   /* 8  */
  --radius-lg: 0.75rem;  /* 12 */
  --radius-xl: 1rem;     /* 16 */
  --radius-full: 9999px;

  /* Shadows (subtle — Volt is flat) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);

  /* Spacing (from spacing.css; base = 4px grid) */
  --spacing-element-1: 4px;
  --spacing-element-2: 8px;
  --spacing-group-1:   8px;
  --spacing-group-2:   16px;
  --spacing-layout-1:  24px;
  --spacing-layout-2:  32px;
}

html, body {
  font-family: var(--volt-font-geist);
  color: var(--fg-1);
  background: var(--volt-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Semantic type classes (match Text component) ---------- */
.volt-title3   { font-size: var(--text-3xl); letter-spacing: var(--tracking-tighter); font-weight: 700; line-height: 1.1; }
.volt-title2   { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight);   font-weight: 700; line-height: 1.15; }
.volt-title1   { font-size: var(--text-xl);  letter-spacing: var(--tracking-tight);   font-weight: 700; line-height: 1.2; }

.volt-heading3 { font-size: var(--text-lg);  letter-spacing: var(--tracking-tight);   font-weight: 700; line-height: 1.3; }
.volt-heading2 { font-size: var(--text-base);letter-spacing: var(--tracking-normal);  font-weight: 700; line-height: 1.4; }
.volt-heading1 { font-size: var(--text-sm);  letter-spacing: var(--tracking-normal);  font-weight: 700; line-height: 1.4; }

.volt-body2    { font-size: var(--text-sm);  line-height: 1.5; font-weight: 400; }
.volt-body1    { font-size: var(--text-xs);  line-height: 1.5; font-weight: 400; }

.volt-helper2  { font-size: var(--text-sm);  color: var(--volt-gray-11); }
.volt-helper1  { font-size: var(--text-xs);  color: var(--volt-gray-11); }

/* HTML element defaults */
h1 { font: 700 var(--text-3xl)/1.1 var(--volt-font-geist); letter-spacing: var(--tracking-tighter); }
h2 { font: 700 var(--text-2xl)/1.15 var(--volt-font-geist); letter-spacing: var(--tracking-tight); }
h3 { font: 700 var(--text-xl)/1.2 var(--volt-font-geist); letter-spacing: var(--tracking-tight); }
h4 { font: 700 var(--text-lg)/1.3 var(--volt-font-geist); letter-spacing: var(--tracking-tight); }
h5 { font: 700 var(--text-base)/1.4 var(--volt-font-geist); }
h6 { font: 700 var(--text-sm)/1.4 var(--volt-font-geist); }
p  { font-size: var(--text-sm); line-height: 1.5; }
code, kbd, samp, pre { font-family: var(--volt-font-mono); font-size: 0.9em; }