/* main theme file.
load this before every other css file otherwise half the variables wont exist
and things start breaking in really stupid ways.

this is basically the central place for all colors spacing shadows fonts etc.

layout is roughly:
1. raw/base values
2. actual semantic variables the site uses
3. old variable names kept so older css doesnt instantly explode
4. small global stuff like scrollbars/fonts

important:
this file is NOT meant to redesign the site. its mainly just cleaning things up
and replacing random hardcoded hex values with proper variables instead */




:root {
/* base variables and raw values.
basically the main stuff everything else pulls from */

/* neutral/slate colors.
mostly tailwind slate stuff mixed with a few random greys already used around
the site because changing all of them would be a nightmare */
  --c-white:      #ffffff;
  --c-slate-50:   #f8fafc;
  --c-slate-100:  #f1f5f9;
  --c-slate-200:  #e2e8f0;
  --c-slate-300:  #cbd5e1;
  --c-slate-400:  #94a3b8;
  --c-slate-500:  #64748b;
  --c-slate-600:  #475569;
  --c-slate-700:  #334155;
  --c-slate-800:  #1e293b;
  --c-slate-900:  #0f172a;

  /* Cool grey ramp (Tailwind gray) */
  --c-gray-50:    #f9fafb;
  --c-gray-100:   #f3f4f6;
  --c-gray-200:   #e5e7eb;
  --c-gray-300:   #d1d5db;
  --c-gray-400:   #9ca3af;
  --c-gray-500:   #6b7280;
  --c-gray-600:   #4b5563;
  --c-gray-700:   #374151;
  --c-gray-800:   #1f2937;
  --c-gray-900:   #111827;
  --c-ink:        #0a0a0a;        /* close to black for marketing headlines    */

/* brand blues + product blues.
yes theres two sets. yes they look similar. no im not merging them because
theyre used for different stuff across the site */
  --c-brand-blue:        #0052FF;  /* marketing site primary                */
  --c-brand-blue-light:  #EAF0FF;
  --c-app-blue-50:       #eff6ff;
  --c-app-blue-100:      #dbeafe;
  --c-app-blue-200:      #bfdbfe;
  --c-app-blue-400:      #60a5fa;
  --c-app-blue-600:      #2563eb;  /* app + admin primary                   */
  --c-app-blue-700:      #1d4ed8;
  --c-app-blue-800:      #1e40af;
  --c-app-blue-900:      #1e3a8a;

  /* Status / accent ramps */
  --c-green-50:   #ecfdf5;
  --c-green-100:  #d1fae5;
  --c-green-200:  #6ee7b7;
  --c-green-400:  #34d399;
  --c-green-500:  #10b981;
  --c-green-600:  #059669;
  --c-green-700:  #047857;
  --c-green-800:  #065f46;

  --c-emerald-50: #f0fdf4;
  --c-emerald-100:#dcfce7;
  --c-emerald-700:#15803d;
  --c-emerald-800:#166534;

  --c-amber-50:   #fffbeb;
  --c-amber-100:  #fef3c7;
  --c-amber-400:  #fbbf24;
  --c-amber-500:  #f59e0b;
  --c-amber-700:  #b45309;
  --c-amber-800:  #92400e;
  --c-amber-900:  #78350f;
  --c-yellow-50:  #fefce8;

  --c-red-50:     #fef2f2;
  --c-red-100:    #fee2e2;
  --c-red-200:    #fecaca;
  --c-red-400:    #f87171;
  --c-red-500:    #ef4444;
  --c-red-600:    #dc2626;
  --c-red-700:    #b91c1c;
  --c-red-800:    #991b1b;
  --c-red-900:    #7f1d1d;

  --c-violet-50:  #f5f3ff;
  --c-violet-100: #ede9fe;
  --c-violet-200: #e9d5ff;
  --c-violet-400: #a78bfa;
  --c-violet-500: #8b5cf6;
  --c-violet-600: #7c3aed;
  --c-violet-700: #6d28d9;
  --c-violet-800: #5b21b6;
  --c-violet-tint:#faf5ff;

  --c-indigo-50:  #eef2ff;
  --c-indigo-500: #6366f1;

  --c-sky-50:     #f0f9ff;
  --c-sky-400:    #38bdf8;
  --c-sky-500:    #0ea5e9;
  --c-sky-700:    #0369a1;

  --c-cyan-50:    #ecfeff;
  --c-cyan-700:   #0e7490;

  --c-pink-500:   #ec4899;
  --c-orange-50:  #fff7ed;
  --c-orange-700: #c2410c;

  /* Tinted neutrals used by lots of surfaces */
  --c-paper:        #ffffff;
  --c-canvas-cool:  #fcfcfd;       /* admin block backgrounds               */
  --c-canvas-warm:  #fcfcfc;       /* dashboard body bg                     */
  --c-canvas-misty: #FCFCFD;       /* marketing body bg                     */
  --c-canvas-mint:  #f7f8fc;       /* milo thread bg                        */
  --c-canvas-fog:   #eef2f7;       /* dashboard widget rails                */
  --c-canvas-snow:  #fafbfc;       /* admin nav section heads               */
  --c-canvas-tide:  #f5f7fb;       /* admin nav row hover                   */
  --c-canvas-ice:   #eef4ff;       /* admin nav active                      */
  --c-canvas-blush: #fafaff;       /* milo fab hover                        */
  --c-tint-brand-soft: #F8FAFF;    /* updates page block tint               */
  --c-tint-brand-soft-2: #F0F4FF;  /* updates page placeholder tint         */
  --c-tint-brand-callout: #f0f7ff; /* updates page CTA bg                   */
  --c-tint-brand-call-blue: #f8faff;/* lesson example block bg              */

  /* semantic tokens */

  /* Marketing surface (index, updates, login, signup, footer, nav) */
  --color-bg:                var(--c-canvas-misty);
  --color-bg-card:           var(--c-paper);
  --color-text:              var(--c-ink);
  --color-text-muted:        var(--c-gray-600);
  --color-text-subtle:       var(--c-gray-400);
  --color-border:            var(--c-gray-200);
  --color-border-soft:       var(--c-gray-100);
  --color-accent:            var(--c-brand-blue);
  --color-accent-tint:       var(--c-brand-blue-light);

  /* App / admin surface (dashboard, admin, milo, lessons player) */
  --color-app-bg:            var(--c-canvas-warm);
  --color-app-surface:       var(--c-paper);
  --color-app-surface-2:     var(--c-slate-50);   /* admin chrome bg       */
  --color-app-text:          var(--c-gray-900);
  --color-app-text-muted:    var(--c-gray-500);
  --color-app-text-subtle:   var(--c-slate-500);
  --color-app-border:        var(--c-gray-200);
  --color-app-border-strong: var(--c-gray-300);
  --color-app-accent:        var(--c-app-blue-600);
  --color-app-accent-hover:  var(--c-app-blue-700);
  --color-app-accent-tint:   var(--c-app-blue-50);
  --color-app-accent-tint-2: var(--c-app-blue-100);

  /* Inverse / dark surfaces (admin sidebar) */
  --color-dark-bg:           var(--c-slate-900);
  --color-dark-bg-2:         var(--c-slate-800);
  --color-dark-text:         var(--c-slate-300);
  --color-dark-text-strong:  var(--c-slate-50);
  --color-dark-border:       var(--c-slate-800);

  /* Status semantics */
  --color-success:        var(--c-green-600);
  --color-success-bg:     var(--c-green-50);
  --color-success-fg:     var(--c-green-800);
  --color-success-border: var(--c-green-400);

  --color-warning:        var(--c-amber-500);
  --color-warning-bg:     var(--c-amber-50);
  --color-warning-fg:     var(--c-amber-800);
  --color-warning-border: var(--c-amber-400);

  --color-danger:         var(--c-red-600);
  --color-danger-bg:      var(--c-red-50);
  --color-danger-fg:      var(--c-red-700);
  --color-danger-fg-deep: var(--c-red-900);
  --color-danger-border:  var(--c-red-200);

  --color-info:           var(--c-app-blue-600);
  --color-info-bg:        var(--c-app-blue-100);
  --color-info-fg:        var(--c-app-blue-700);
  --color-info-fg-deep:   var(--c-app-blue-800);

  /* typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
               monospace;

  --fs-2xs:   0.7rem;
  --fs-xs:    0.75rem;
  --fs-sm:    0.85rem;
  --fs-base:  0.95rem;
  --fs-md:    1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   1.75rem;
  --fs-4xl:   2.25rem;
  --fs-5xl:   2.5rem;
  --fs-hero:  4.25rem;

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.5;
  --lh-relax:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-tighter:-0.03em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.1em;

/* spacing values.
used for padding gaps margins and all the other spacing stuff so its easier
to keep things consistent without typing random values everywhere */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

/* border radius stuff.
everything is sharp corners right now but im keeping these here anyway because
knowing me ill probably change my mind later */
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-xl:     12px;
  --radius-pill:   999px;

  /* borders*/
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /*shadows*/
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.05),
                 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg:   0 8px 16px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 10px 15px -3px rgba(0, 0, 0, 0.05),
                 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-2xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10),
                 0 8px 10px -6px rgba(0, 0, 0, 0.10);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
                 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.18);
  --shadow-toast:   0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-panel:   -10px 0 30px -12px rgba(15, 23, 42, 0.35);
  --shadow-card-soft: 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-accent-glow: 0 6px 12px -4px rgba(37, 99, 235, 0.15);
  --shadow-brand-tap:   0 4px 6px rgba(0, 82, 255, 0.25);

  /* Sticker / offset shadows used by Milo */
  --shadow-sticker:        6px 6px 0 rgba(15, 23, 42, 0.08);
  --shadow-sticker-pop:    10px 10px 0 rgba(37, 99, 235, 0.12),
                           0 24px 50px -22px rgba(15, 23, 42, 0.45);

  /* Focus ring */
  --ring-app:    0 0 0 3px rgba(37, 99, 235, 0.18);
  --ring-app-2:  0 0 0 3px rgba(37, 99, 235, 0.15);
  --ring-app-4:  0 0 0 4px var(--c-app-blue-50);
  --ring-brand:  0 0 0 3px rgba(0, 82, 255, 0.12);

  /*motion / transition*/
  --t-fast:   0.12s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.3s ease;
  --t-emph:   0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* layout */
  --container-max: 1280px;
  --container-px:  2rem;
  --z-header:  100;
  --z-overlay: 1000;
  --z-toast:   9999;

/* old variable aliases.
dont delete these because half the site still uses them and i genuinely cant be
asked to rewrite every class right now */

  /* x.css (marketing) */
  --blue:         var(--color-accent);
  --blue-light:   var(--color-accent-tint);
  --text-dark:    var(--color-text);
  --text-gray:    var(--color-text-muted);
  --text-light:   var(--color-text-subtle);
  --bg-main:      var(--color-bg);
  --bg-card:      var(--color-bg-card);
  --border:       var(--color-border);
  --border-light: var(--color-border-soft);

  /* dashboard.css */
  --bg-color:            var(--color-app-bg);
  --sidebar-bg:          var(--color-app-surface);
  --card-bg:             var(--color-app-surface);
  --border-color:        var(--color-app-border);
  --text-main:           var(--color-app-text);
  --text-muted:          var(--color-app-text-muted);
  --primary-blue:        var(--color-app-accent);
  --primary-blue-light:  var(--color-app-accent-tint);
  --green:               var(--c-green-500);
  --font-family:         var(--font-sans);

  /* admin.css */
  --admin-sidebar-bg:          var(--color-dark-bg);
  --admin-sidebar-text:        var(--color-dark-text);
  --admin-sidebar-text-strong: var(--color-dark-text-strong);
  --admin-sidebar-active:      var(--color-dark-bg-2);
  --admin-border:              var(--color-app-border);
  --admin-border-strong:       var(--color-app-border-strong);
  --admin-bg:                  var(--color-app-surface-2);
  --admin-card:                var(--color-app-surface);
  --admin-text:                var(--c-slate-900);
  --admin-muted:               var(--color-app-text-subtle);
  --admin-primary:             var(--color-app-accent);
  --admin-primary-hover:       var(--color-app-accent-hover);
  --admin-danger:              var(--color-danger);
  --admin-warning-bg:          var(--color-warning-bg);
  --admin-warning-border:      var(--color-warning-border);
  --admin-success:             var(--color-success);
  --admin-mono:                var(--font-mono);

  /* milo.css */
  --milo-ink:        var(--c-slate-900);
  --milo-ink-soft:   var(--c-slate-600);
  --milo-muted:      var(--c-slate-400);
  --milo-line:       var(--c-slate-200);
  --milo-line-soft:  #eef2f7;
  --milo-paper:      var(--c-paper);
  --milo-canvas:     var(--c-canvas-mint);
  --milo-accent:     var(--color-app-accent);
  --milo-accent-2:   var(--color-app-accent-hover);
  --milo-accent-3:   var(--color-app-accent);
  --milo-accent-ink: var(--c-app-blue-900);
  --milo-warn:       var(--c-red-700);
  --milo-warn-bg:    var(--c-red-50);
  --milo-warn-line:  var(--c-red-200);
  --milo-shadow-hard: var(--shadow-sticker);
  --milo-shadow-pop:  var(--shadow-sticker-pop);
}

/* basic resets + scrollbar stuff.
not setting body styles in here because the dashboard/admin pages do weird
stuff with their own layouts and it completely breaks if this file touches it */

html {
  -webkit-text-size-adjust: 100%;
}