/* ==========================================================================
   HassleFreebooks — Design Tokens
   ==========================================================================
   Single source of truth for ALL CSS custom properties.
   Load this file FIRST, before any other stylesheet.

   Light theme  = :root (default)
   Dark theme   = body.theme-dark
   System theme = body.theme-system (follows OS preference)
   ========================================================================== */

/* --------------------------------------------------------------------------
   LIGHT THEME (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Page & Surface */
  --color-bg:            #faf9f7;
  --color-surface:       #ffffff;
  --color-surface-alt:   #f5f3f0;
  --color-surface-hover: #f0eeeb;

  /* Borders */
  --color-border:        #e8e5e1;
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-strong: #d3d1cb;

  /* Text */
  --color-text:           #37352f;
  --color-text-secondary: #787774;
  --color-text-muted:     #9b9a97;
  --color-text-on-primary: #ffffff;

  /* Primary — friendly blue */
  --color-primary:       #2383e2;
  --color-primary-hover: #1b6ec2;
  --color-primary-bg:    #e8f0fe;
  --color-primary-text:  #174ea6;

  /* Status colors */
  --color-success:       #0f7b6c;
  --color-success-bg:    #e6f4f1;
  --color-success-text:  #0a5c51;
  --color-warning:       #d9730d;
  --color-warning-bg:    #fdf0e5;
  --color-warning-text:  #9a5009;
  --color-danger:        #e03e3e;
  --color-danger-bg:     #fce8e8;
  --color-danger-text:   #a12d2d;
  --color-info:          #2383e2;
  --color-info-bg:       #e8f0fe;
  --color-info-text:     #174ea6;

  /* Typography — 15px base matches Notion/Stripe/Linear for app UI */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-size-2xs:  0.6875rem;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight: 1.25;
  --line-height-base:  1.5;
  --line-height-loose: 1.75;

  /* Spacing */
  --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-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border radius — warm/rounded */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows — soft, warm */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-lg:  0 10px 20px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.03);
  --shadow-xl:  0 16px 32px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-medium: 300ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --header-height:  60px;
  --container-max:  1200px;
  --container-narrow: 720px;
  --sidebar-width:  260px;

  /* Input heights — matches Stripe's compact form controls */
  --input-height:    36px;
  --input-height-sm: 28px;
  --input-height-lg: 40px;

  /* Z-index scale */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-tooltip:        1070;

  /* ---- Legacy aliases (for gradual migration) ---- */
  --bg-color:         var(--color-bg);
  --text-color:       var(--color-text);
  --card-bg:          var(--color-surface);
  --border-color:     var(--color-border);
  --muted-text:       var(--color-text-muted);
  --link-color:       var(--color-primary);
  --color-white:      #ffffff;
  --color-black:      #000000;
  --color-off-white:  #faf9f7;
  --color-gray-50:    #f9fafb;
  --color-gray-100:   #f3f4f6;
  --color-gray-200:   #e5e7eb;
  --color-gray-300:   #d1d5db;
  --color-gray-400:   #9ca3af;
  --color-gray-500:   #6b7280;
  --color-gray-600:   #4b5563;
  --color-gray-700:   #374151;
  --color-gray-800:   #1f2937;
  --color-gray-900:   #111827;
  --color-primary-dark:  var(--color-primary-hover);
  --color-primary-light: #5dade2;
  --table-stripe-bg:  var(--color-surface-alt);
  --border-subtle:    var(--color-border-subtle);
  --font-primary:     var(--font-sans);
  --font-semibold:    var(--font-weight-semibold);
  --text-lg:          var(--font-size-lg);
  --shadow-hover:     var(--shadow-lg);
}


/* --------------------------------------------------------------------------
   LIGHT THEME — explicit body selector
   Tells the browser NOT to auto-darken this page (Firefox/Chrome dark mode).
   -------------------------------------------------------------------------- */
body.theme-light {
  color-scheme: light only;
  background-color: var(--color-bg) !important;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   DARK THEME
   -------------------------------------------------------------------------- */
body.theme-dark {
  color-scheme: dark;

  --color-bg:            #191919;
  --color-surface:       #252525;
  --color-surface-alt:   #2f2f2f;
  --color-surface-hover: #363636;

  --color-border:        #3a3a3a;
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-strong: #4a4a4a;

  --color-text:           rgba(255, 255, 255, 0.81);
  --color-text-secondary: rgba(255, 255, 255, 0.50);
  --color-text-muted:     rgba(255, 255, 255, 0.32);
  --color-text-on-primary: #ffffff;

  --color-primary:       #529cca;
  --color-primary-hover: #6db3df;
  --color-primary-bg:    #1a3148;
  --color-primary-text:  #a3d0f0;

  --color-success:       #3db9a5;
  --color-success-bg:    #1a3330;
  --color-success-text:  #7dd8c9;
  --color-warning:       #e8943a;
  --color-warning-bg:    #3d2a12;
  --color-warning-text:  #f0c078;
  --color-danger:        #eb6060;
  --color-danger-bg:     #3d1c1c;
  --color-danger-text:   #f5a3a3;
  --color-info:          #529cca;
  --color-info-bg:       #1a3148;
  --color-info-text:     #a3d0f0;

  /* Shadow adjustments for dark surfaces */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 20px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 16px 32px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2);

  /* Legacy aliases — dark overrides */
  --bg-color:        var(--color-bg);
  --text-color:      var(--color-text);
  --card-bg:         var(--color-surface);
  --border-color:    var(--color-border);
  --muted-text:      var(--color-text-muted);
  --link-color:      var(--color-primary);
  --color-white:     #191919;
  --color-off-white: #1f1f1f;
  --color-gray-50:   #252525;
  --color-gray-100:  #2f2f2f;
  --color-gray-200:  #3a3a3a;
  --color-gray-300:  #4a4a4a;
  --color-gray-400:  #6b7280;
  --color-gray-500:  #9ca3af;
  --color-gray-600:  #d1d5db;
  --color-gray-700:  #e5e7eb;
  --color-gray-800:  #f3f4f6;
  --color-gray-900:  #f9fafb;
  --table-stripe-bg: var(--color-surface-alt);
  --border-subtle:   var(--color-border-subtle);
}


/* --------------------------------------------------------------------------
   SYSTEM THEME — follows OS preference via media query
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body.theme-system {
    color-scheme: dark;

    --color-bg:            #191919;
    --color-surface:       #252525;
    --color-surface-alt:   #2f2f2f;
    --color-surface-hover: #363636;

    --color-border:        #3a3a3a;
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border-strong: #4a4a4a;

    --color-text:           rgba(255, 255, 255, 0.81);
    --color-text-secondary: rgba(255, 255, 255, 0.50);
    --color-text-muted:     rgba(255, 255, 255, 0.32);
    --color-text-on-primary: #ffffff;

    --color-primary:       #529cca;
    --color-primary-hover: #6db3df;
    --color-primary-bg:    #1a3148;
    --color-primary-text:  #a3d0f0;

    --color-success:       #3db9a5;
    --color-success-bg:    #1a3330;
    --color-warning:       #e8943a;
    --color-warning-bg:    #3d2a12;
    --color-danger:        #eb6060;
    --color-danger-bg:     #3d1c1c;
    --color-info:          #529cca;
    --color-info-bg:       #1a3148;

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 10px 20px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);

    /* Legacy aliases */
    --bg-color:        var(--color-bg);
    --text-color:      var(--color-text);
    --card-bg:         var(--color-surface);
    --border-color:    var(--color-border);
    --muted-text:      var(--color-text-muted);
    --link-color:      var(--color-primary);
    --color-white:     #191919;
    --color-off-white: #1f1f1f;
    --color-gray-50:   #252525;
    --color-gray-100:  #2f2f2f;
    --color-gray-200:  #3a3a3a;
    --color-gray-300:  #4a4a4a;
    --color-gray-400:  #6b7280;
    --color-gray-500:  #9ca3af;
    --color-gray-600:  #d1d5db;
    --color-gray-700:  #e5e7eb;
    --color-gray-800:  #f3f4f6;
    --color-gray-900:  #f9fafb;
    --table-stripe-bg: var(--color-surface-alt);
    --border-subtle:   var(--color-border-subtle);
  }
}