/* Atasuai Design System — token layer
 * All tokens are CSS custom props so we can override with a Tweaks panel.
 */

:root {
  /* ── Brand ramps ─────────────────────────────────────────── */
  --brand-blue-50:  #EFF4FF;
  --brand-blue-100: #DDE8FF;
  --brand-blue-200: #B9D0FF;
  --brand-blue-300: #94B7FF;
  --brand-blue-400: #729EFE;
  --brand-blue-500: #4F89FC;
  --brand-blue-600: #2E6FE8;
  --brand-blue-700: #1E54B5;
  --brand-blue-800: #163E82;
  --brand-blue-900: #0F2A57;

  --brand-navy-800: #163063;
  --brand-navy-900: #0E1F42;

  --brand-orange-500: #FF7A00;
  --brand-pink-500:   #EE2B69;

  /* ── Neutral ramp ────────────────────────────────────────── */
  --gray-0:   #FFFFFF;
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #252E3A;
  --gray-900: #1D2630;

  /* ── Accent primitives ───────────────────────────────────── */
  --success-100: #DCFCE7;
  --success-500: #22C55E;
  --success-700: #15803D;
  --warning-100: #FFEDD5;
  --warning-500: #F97316;
  --warning-700: #C2410C;
  --error-100:   #FEE2E2;
  --error-500:   #EF4444;
  --error-700:   #B91C1C;
  --info-100:    #E0F2FE;
  --info-500:    #0EA5E9;
  --info-700:    #0369A1;

  /* ── Semantic tokens (alias layer) ───────────────────────── */
  --color-bg-canvas:        var(--gray-0);
  --color-bg-page:          var(--gray-50);
  --color-bg-inset:         var(--gray-100);
  --color-bg-overlay:       var(--gray-900);
  --color-bg-brand-strong:  var(--brand-blue-600);
  --color-bg-brand-subtle:  var(--brand-blue-50);
  --color-bg-success-subtle:var(--success-100);
  --color-bg-warning:       var(--warning-500);
  --color-bg-warning-subtle:var(--warning-100);
  --color-bg-error-subtle:  var(--error-100);
  --color-bg-info:          var(--info-500);
  --color-bg-info-subtle:   var(--info-100);

  --color-fg-primary:       var(--gray-900);
  --color-fg-secondary:     var(--gray-700);
  --color-fg-muted:         var(--gray-500);
  --color-fg-on-brand:      var(--gray-0);
  --color-fg-brand:         var(--brand-blue-600);
  --color-fg-link:          var(--brand-blue-600);

  --color-border:           var(--gray-200);
  --color-border-strong:    var(--gray-300);
  --color-border-brand:     var(--brand-blue-500);

  /* ── Brand primary (tweakable) ───────────────────────────── */
  --brand-primary:          var(--brand-blue-500);
  --brand-primary-strong:   var(--brand-blue-600);
  --brand-primary-subtle:   var(--brand-blue-50);
  --brand-primary-on:       #FFFFFF;

  /* ── Type ────────────────────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'JetBrains Mono', Menlo, Monaco, monospace;

  --type-display-size: 32px; --type-display-lh: 40px; --type-display-weight: 600;
  --type-h1-size: 32px; --type-h1-lh: 40px; --type-h1-weight: 600;
  --type-h2-size: 24px; --type-h2-lh: 32px; --type-h2-weight: 600;
  --type-h3-size: 20px; --type-h3-lh: 28px; --type-h3-weight: 600;
  --type-h4-size: 18px; --type-h4-lh: 24px; --type-h4-weight: 600;
  --type-body-l-size: 16px; --type-body-l-lh: 24px;
  --type-body-m-size: 14px; --type-body-m-lh: 20px;
  --type-body-s-size: 12px; --type-body-s-lh: 16px;
  --type-label-l-size: 14px; --type-label-l-lh: 20px; --type-label-l-weight: 500;
  --type-label-m-size: 12px; --type-label-m-lh: 16px; --type-label-m-weight: 500;
  --type-caption-size: 11px; --type-caption-lh: 14px;

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-base:16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-2xs: 2px;
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:999px;

  /* component-mapped radii (tweakable via --radius-scale) */
  --radius-scale: 1;
  --radius-button:  calc(var(--radius-sm)  * var(--radius-scale));
  --radius-input:   calc(var(--radius-sm)  * var(--radius-scale));
  --radius-card:    calc(var(--radius-md)  * var(--radius-scale));
  --radius-surface: calc(var(--radius-lg)  * var(--radius-scale));

  /* ── Elevation (two-layer shadows) ───────────────────────── */
  --elev-flat:   none;
  --elev-soft:   0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --elev-medium: 0 2px 4px rgba(16,24,40,0.06), 0 8px 20px rgba(16,24,40,0.08);
  --elev-strong: 0 4px 8px rgba(16,24,40,0.08), 0 24px 48px -8px rgba(16,24,40,0.18);

  /* ── Motion ──────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0.0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);

  /* ── Density (tweakable) ─────────────────────────────────── */
  --density-row-h:    40px;
  --density-input-h:  40px;
  --density-button-h: 40px;
  --density-pad-x:    12px;
  --density-pad-y:    8px;
  --density-gap:      12px;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-w: 264px;
  --page-max: 1180px;
}

/* Density variants set via [data-density] on <html> */
html[data-density="compact"] {
  --density-row-h: 32px;
  --density-input-h: 32px;
  --density-button-h: 32px;
  --density-pad-x: 10px;
  --density-pad-y: 6px;
  --density-gap: 8px;
}
html[data-density="cozy"] {
  --density-row-h: 40px;
  --density-input-h: 40px;
  --density-button-h: 40px;
  --density-pad-x: 12px;
  --density-pad-y: 8px;
  --density-gap: 12px;
}
html[data-density="comfortable"] {
  --density-row-h: 48px;
  --density-input-h: 48px;
  --density-button-h: 48px;
  --density-pad-x: 16px;
  --density-pad-y: 12px;
  --density-gap: 16px;
}

/* Palette swaps */
html[data-palette="navy"] {
  --brand-primary: var(--brand-navy-800);
  --brand-primary-strong: var(--brand-navy-900);
  --brand-primary-subtle: #E7ECF6;
  --color-fg-brand: var(--brand-navy-800);
  --color-fg-link: var(--brand-navy-800);
  --color-bg-brand-strong: var(--brand-navy-800);
  --color-bg-brand-subtle: #E7ECF6;
  --color-border-brand: var(--brand-navy-800);
}
html[data-palette="violet"] {
  --brand-primary: #7F56D9;
  --brand-primary-strong: #6941C6;
  --brand-primary-subtle: #F4EBFF;
  --color-fg-brand: #6941C6;
  --color-fg-link: #6941C6;
  --color-bg-brand-strong: #6941C6;
  --color-bg-brand-subtle: #F4EBFF;
  --color-border-brand: #7F56D9;
}
html[data-palette="emerald"] {
  --brand-primary: #16A34A;
  --brand-primary-strong: #15803D;
  --brand-primary-subtle: #DCFCE7;
  --color-fg-brand: #15803D;
  --color-fg-link: #15803D;
  --color-bg-brand-strong: #15803D;
  --color-bg-brand-subtle: #DCFCE7;
  --color-border-brand: #16A34A;
}