/* =========================================================
   theme.css — Design tokens, colors, typography, variables
   privateeditors.com
   ========================================================= */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Brand Colors */
  --color-primary:       #1a6b4a;   /* Deep privacy green */
  --color-primary-dark:  #0f4530;
  --color-primary-light: #2a8b63;
  --color-accent:        #00c97a;   /* Vibrant mint accent */
  --color-accent-soft:   #e6f9f0;

  /* Neutrals */
  --color-bg:            #f7f8f6;   /* Off-white warm */
  --color-surface:       #ffffff;
  --color-surface-alt:   #f0f4f2;
  --color-border:        #dde5e0;
  --color-border-dark:   #b8ccc4;

  /* Text */
  --color-text:          #1a2820;   /* Near-black green tint */
  --color-text-muted:    #5a7068;
  --color-text-light:    #8aa39a;
  --color-text-inverse:  #ffffff;

  /* Status */
  --color-success:       #00c97a;
  --color-warning:       #f59e0b;
  --color-error:         #ef4444;
  --color-info:          #3b82f6;

  /* Dark mode */
  --color-dark-bg:       #0d1a14;
  --color-dark-surface:  #152019;
  --color-dark-surface2: #1e2e25;
  --color-dark-border:   #2a3d32;
  --color-dark-text:     #e4ede8;
  --color-dark-muted:    #7a9e8e;

  /* Typography */
  --font-sans:  'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'DM Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold: 600;
  --font-bold:    700;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Spacing */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Border Radius */
  --radius-sm:   0.375rem;   /* 6px */
  --radius-md:   0.75rem;    /* 12px */
  --radius-lg:   1rem;       /* 16px */
  --radius-xl:   1.5rem;     /* 24px */
  --radius-2xl:  2rem;       /* 32px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.09), 0 10px 10px rgba(0,0,0,0.03);
  --shadow-card: 0 2px 8px rgba(26,107,74,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 24px rgba(26,107,74,0.14), 0 2px 8px rgba(0,0,0,0.06);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Z-Index Scale */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

/* ── Dark Mode Tokens ────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:          var(--color-dark-bg);
  --color-surface:     var(--color-dark-surface);
  --color-surface-alt: var(--color-dark-surface2);
  --color-border:      var(--color-dark-border);
  --color-border-dark: #3d5747;
  --color-text:        var(--color-dark-text);
  --color-text-muted:  var(--color-dark-muted);
  --color-text-light:  #567a69;
  --color-accent-soft: #0d2e1e;
  --shadow-card:       0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-card-hover: 0 8px 24px rgba(0,201,122,0.1), 0 2px 8px rgba(0,0,0,0.25);
}