/* ─────────────────────────────────────────────────────────────────────────────
   Action Tether — Design Tokens
   All brand colors, spacing, typography, and component variables.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand (Purple) ─────────────────────────────────────────── */
  --at-brand-50:  #EAE8FC;
  --at-brand-100: #CECBF6;
  --at-brand-200: #AFA9EC;
  --at-brand-400: #7F77DD;
  --at-brand-600: #6B5DD3;   /* primary */
  --at-brand-700: #534AB7;
  --at-brand-800: #3C3489;
  --at-brand-900: #26215C;

  /* ── Teal (success / energy-full) ──────────────────────────── */
  --at-teal-50:  #E1F5EE;
  --at-teal-100: #9FE1CB;
  --at-teal-400: #1D9E75;
  --at-teal-600: #0F6E56;
  --at-teal-800: #085041;
  --at-teal-900: #04342C;

  /* ── Amber (warning / energy-some / defer) ──────────────────── */
  --at-amber-50:  #FAEEDA;
  --at-amber-100: #FAC775;
  --at-amber-400: #BA7517;
  --at-amber-600: #854F0B;
  --at-amber-800: #633806;
  --at-amber-900: #412402;

  /* ── Coral / Red (danger / overdue / scary) ─────────────────── */
  --at-coral-50:  #FAECE7;
  --at-coral-100: #F5C4B3;
  --at-coral-400: #D85A30;
  --at-coral-600: #993C1D;
  --at-coral-800: #712B13;
  --at-coral-900: #4A1B0C;

  /* ── Blue (info / energy-low / delegate) ───────────────────── */
  --at-blue-50:  #E6F1FB;
  --at-blue-100: #B5D4F4;
  --at-blue-400: #378ADD;
  --at-blue-600: #185FA5;
  --at-blue-800: #0C447C;
  --at-blue-900: #042C53;

  /* ── Green (split / quick-win) ──────────────────────────────── */
  --at-green-50:  #EAF3DE;
  --at-green-100: #C0DD97;
  --at-green-400: #639922;
  --at-green-600: #3B6D11;
  --at-green-800: #27500A;

  /* ── Gray (neutral) ─────────────────────────────────────────── */
  --at-gray-50:  #F8F7F4;
  --at-gray-100: #F1EFE8;
  --at-gray-200: #D3D1C7;
  --at-gray-400: #B4B2A9;
  --at-gray-500: #888780;
  --at-gray-600: #5F5E5A;
  --at-gray-700: #444441;
  --at-gray-800: #2C2C2A;
  --at-gray-900: #1A1A1A;

  /* ── Semantic aliases ───────────────────────────────────────── */
  --at-color-brand:          var(--at-brand-600);
  --at-color-brand-light:    var(--at-brand-50);
  --at-color-brand-dark:     var(--at-brand-800);

  --at-color-success:        var(--at-teal-600);
  --at-color-success-bg:     var(--at-teal-50);
  --at-color-warning:        var(--at-amber-400);
  --at-color-warning-bg:     var(--at-amber-50);
  --at-color-danger:         var(--at-coral-600);
  --at-color-danger-bg:      var(--at-coral-50);
  --at-color-info:           var(--at-blue-600);
  --at-color-info-bg:        var(--at-blue-50);

  --at-color-energy-full:    var(--at-teal-600);
  --at-color-energy-full-bg: var(--at-teal-50);
  --at-color-energy-some:    var(--at-amber-400);
  --at-color-energy-some-bg: var(--at-amber-50);
  --at-color-energy-low:     var(--at-blue-600);
  --at-color-energy-low-bg:  var(--at-blue-50);

  /* ── Surfaces ───────────────────────────────────────────────── */
  --at-surface-app:     var(--at-gray-50);
  --at-surface-card:    #FFFFFF;
  --at-surface-input:   #FFFFFF;
  --at-surface-overlay: rgba(26, 26, 26, 0.45);

  /* ── Text ───────────────────────────────────────────────────── */
  --at-text-primary:   var(--at-gray-900);
  --at-text-secondary: var(--at-gray-600);
  --at-text-muted:     var(--at-gray-500);
  --at-text-disabled:  var(--at-gray-400);
  --at-text-inverse:   var(--at-brand-50);

  /* ── Borders ────────────────────────────────────────────────── */
  --at-border:         rgba(68, 68, 65, 0.12);
  --at-border-medium:  rgba(68, 68, 65, 0.22);
  --at-border-strong:  rgba(68, 68, 65, 0.35);

  /* ── Typography ─────────────────────────────────────────────── */
  --at-font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --at-font-mono:  'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  --at-text-xs:   11px;
  --at-text-sm:   13px;
  --at-text-base: 15px;
  --at-text-md:   17px;
  --at-text-lg:   20px;
  --at-text-xl:   24px;
  --at-text-2xl:  30px;

  --at-weight-regular: 400;
  --at-weight-medium:  500;

  --at-line-tight:  1.25;
  --at-line-normal: 1.5;
  --at-line-loose:  1.7;

  /* ── Spacing ────────────────────────────────────────────────── */
  --at-space-1:  4px;
  --at-space-2:  8px;
  --at-space-3:  12px;
  --at-space-4:  16px;
  --at-space-5:  20px;
  --at-space-6:  24px;
  --at-space-8:  32px;
  --at-space-10: 40px;
  --at-space-12: 48px;

  /* ── Border radius ──────────────────────────────────────────── */
  --at-radius-sm:   6px;
  --at-radius-md:   10px;
  --at-radius-lg:   14px;
  --at-radius-xl:   20px;
  --at-radius-full: 9999px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --at-nav-height:      58px;
  --at-header-height:   52px;
  --at-sheet-radius:    20px;
  --at-safe-bottom:     env(safe-area-inset-bottom, 0px);
  --at-safe-top:        env(safe-area-inset-top, 0px);

  /* ── Transitions ────────────────────────────────────────────── */
  --at-transition-fast:   120ms ease;
  --at-transition-normal: 200ms ease;
  --at-transition-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shadows ────────────────────────────────────────────────── */
  --at-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --at-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --at-shadow-sheet: 0 -4px 32px rgba(0,0,0,0.12);

  /* ── Z-indices ──────────────────────────────────────────────── */
  --at-z-base:    1;
  --at-z-nav:     100;
  --at-z-header:  200;
  --at-z-overlay: 300;
  --at-z-sheet:   400;
  --at-z-toast:   500;
}

/* ── Dark mode overrides ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --at-surface-app:   #1C1C1E;
    --at-surface-card:  #2C2C2A;
    --at-surface-input: #383836;

    --at-text-primary:   #F0EEE8;
    --at-text-secondary: #9C9A92;
    --at-text-muted:     #888780;
    --at-text-disabled:  #5F5E5A;

    --at-border:        rgba(240, 238, 232, 0.10);
    --at-border-medium: rgba(240, 238, 232, 0.18);
    --at-border-strong: rgba(240, 238, 232, 0.28);

    --at-gray-50:  #2C2C2A;
    --at-gray-100: #383836;
  }
}