/* =============================================================================
 * Colors
 * -----------------------------------------------------------------------------
 * Single source of truth for every color used in the product.
 *
 * Structure:
 *   1. Brand palette (primary / accent)
 *   2. Neutral ramps (slate + gray)
 *   3. Semantic state colors (success / danger / warning / info)
 *   4. Extended palette (indigo / purple / pink / rose / sky / teal / emerald / amber / orange)
 *   5. Base (black / white)
 *   6. Role tokens (background, text, border, surface, shadow, overlay...)
 *   7. Brand marks (social, OS chrome, logo tiles)
 *   8. Legacy aliases (backwards-compat with earlier variable names)
 *
 * Conventions:
 *   - Solid colors expose both `--<name>` and `--<name>-rgb` (RGB channels).
 *     Use `rgba(var(--<name>-rgb), <alpha>)` when you need transparency; never
 *     inline rgba(r, g, b, a) with literal channel values.
 *   - Never reference literal color values (`#...`, `rgb(...)`, `rgba(...)`)
 *     outside this file. Always reference a token from here.
 * ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
   * 1. Brand palette
   * ------------------------------------------------------------------------- */
  --primary-color: #63ea71;
  --primary-color-rgb: 99, 234, 113;
  --primary-color-hover: #4fd85f;
  --primary-color-hover-rgb: 79, 216, 95;
  --primary-color-dark: #27b079;
  --primary-color-dark-rgb: 39, 176, 121;
  --primary-color-deep: #08493c;
  --primary-color-text: var(--black-color);

  --accent-color: var(--primary-color);
  --accent-color-rgb: var(--primary-color-rgb);

  /* ---------------------------------------------------------------------------
   * 2. Neutral ramps
   * ------------------------------------------------------------------------- */
  /* Slate (cool neutral — the canonical text/background ramp) */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-400-rgb: 148, 163, 184;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-900-rgb: 15, 23, 42;

  /* Gray (warm neutral — used for body text and UI borders) */
  --color-gray-50: #f9fafb;
  --color-gray-50-rgb: 249, 250, 251;
  --color-gray-100: #f3f4f6;
  --color-gray-100-rgb: 243, 244, 246;
  --color-gray-200: #e5e7eb;
  --color-gray-200-rgb: 229, 231, 235;
  --color-gray-300: #d1d5db;
  --color-gray-300-rgb: 209, 213, 219;
  --color-gray-400: #9ca3af;
  --color-gray-400-rgb: 156, 163, 175;
  --color-gray-500: #6b7280;
  --color-gray-500-rgb: 107, 114, 128;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-900-rgb: 17, 24, 39;

  /* Zinc (used sparingly for candidate surfaces) */
  --color-zinc-50: #fafafa;
  --color-zinc-50-rgb: 250, 250, 250;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a3a3a3;
  --color-zinc-400-rgb: 161, 161, 170;
  --color-zinc-500: #737373;
  --color-zinc-600: #525252;
  --color-zinc-700: #404040;
  --color-zinc-800: #262626;
  --color-zinc-900: #171717;
  --color-zinc-950: #09090b;

  /* Mid-gray short-hex aliases used in legacy code */
  --color-gray-light: #ccc;
  --color-gray-lighter: #ddd;
  --color-gray-medium: #888;
  --color-gray-muted: #999;
  --color-gray-soft: #aaa;
  --color-gray-subtle: #777;
  --color-gray-faint: #555;

  /* Project-specific neutrals (non-standard tints) */
  --color-neutral-off-white: #f8f9fa;
  --color-neutral-off-white-rgb: 248, 249, 250;
  --color-neutral-off-white-warm: #f0f0f0;
  --color-neutral-gray-darker: #3a3a3a;
  --color-neutral-gray-deeper: #3a3a4a;
  --color-neutral-gray-mid: #2a2a2a;
  --color-neutral-panel: #1a1a2e;
  --color-neutral-panel-rgb: 26, 26, 46;
  --color-neutral-border: #c8c8d0;
  --color-neutral-border-light: #b0b0b8;
  --color-neutral-border-softer: #c0c0c8;
  --color-neutral-surface: #e0e0e0;
  --color-neutral-surface-warm: #e0e0da;
  --color-neutral-surface-cool: #e8e8ec;
  --color-neutral-surface-cooler: #ededf0;
  --color-neutral-surface-mint-50: #f8faf8;
  --color-neutral-surface-mint-100: #f5f8f5;
  --color-neutral-surface-mint-200: #f3f5f3;
  --color-neutral-surface-mint-300: #eff2ef;
  --color-neutral-bg-deep: #0a0f1a;
  --color-neutral-bg-dark: #0b0f17;
  --color-neutral-bg-darkest: #080c16;
  --color-neutral-bg-darkest-rgb: 8, 12, 22;
  --color-neutral-ink: #0f1419;

  /* ---------------------------------------------------------------------------
   * 3. Semantic state colors
   * ------------------------------------------------------------------------- */
  /* Success (emerald) */
  --success-color: #22c55e;
  --success-color-rgb: 34, 197, 94;
  --success-color-light: #4ade80;
  --success-color-light-rgb: 74, 222, 128;
  --success-color-dark: #16a34a;
  --success-color-dark-rgb: 22, 163, 74;
  --success-color-darker: #15803d;
  --success-color-emerald: #059669;
  --success-color-emerald-rgb: 5, 150, 105;
  --success-color-emerald-dark: #047857;
  --success-color-emerald-darker: #065f46;
  --success-color-teal: #10b981;
  --success-color-teal-rgb: 16, 185, 129;
  --success-color-teal-dark: #0d9488;
  --success-color-text: #166534;
  --success-color-bg: #dcfce7;
  --success-color-bg-soft: #ecfdf5;
  --success-color-bg-softer: #ecfdf3;
  --success-color-bg-softest: #f0fdf4;
  --success-color-bg-faint: #f3fff4;
  --success-color-bg-paper: #d1fae5;
  --success-color-bg-paper-rgb: 209, 250, 229;
  --success-color-bg-tint: #a7f3d0;
  --success-color-bg-tint-rgb: 167, 243, 208;
  --success-color-bg-ecfdf3-rgb: 236, 253, 243;
  --success-color-bg-ecfdf5-rgb: 236, 253, 245;

  /* Danger (red) */
  --danger-color: #dc2626;
  --danger-color-rgb: 220, 38, 38;
  --danger-color-light: #ef4444;
  --danger-color-light-rgb: 239, 68, 68;
  --danger-color-lighter: #f87171;
  --danger-color-lighter-rgb: 248, 113, 113;
  --danger-color-lightest: #fca5a5;
  --danger-color-lightest-rgb: 254, 202, 202;
  --danger-color-dark: #b91c1c;
  --danger-color-text: #b91c1c;
  --danger-color-bg: #fef2f2;

  /* Rose (secondary danger) */
  --rose-color: #f43f5e;
  --rose-color-rgb: 244, 63, 94;
  --rose-color-dark: #be123c;
  --rose-color-paper: #fef2f2;
  --rose-color-ink-dark: #2a0f13;
  --rose-color-ink-darker: #3f141a;

  /* Warning (amber) */
  --warning-color: #f59e0b;
  --warning-color-rgb: 245, 158, 11;
  --warning-color-light: #fbbf24;
  --warning-color-light-rgb: 251, 191, 36;
  --warning-color-dark: #d97706;
  --warning-color-darker: #b45309;
  --warning-color-deepest: #92400e;
  --warning-color-text: #92400e;
  --warning-color-text-alt: #a16207;
  --warning-color-bg: #fef3c7;
  --warning-color-bg-soft: #fefce8;
  --warning-color-bg-paper: #fff7ed;
  --warning-color-bg-tint: #fde68a;
  --warning-color-bg-tint-rgb: 254, 240, 138;
  --warning-color-ink-dark: #3d2c00;

  /* Orange / Peach */
  --orange-color: #f97316;
  --orange-color-dark: #c2410c;
  --orange-color-peach: #fe815f;
  --orange-color-peach-rgb: 254, 129, 95;
  --orange-color-bg-tint: #fed7aa;
  --orange-color-bg-tint-rgb: 254, 215, 170;

  /* Info (blue) */
  --info-color: #3b82f6;
  --info-color-rgb: 59, 130, 246;
  --info-color-light: #60a5fa;
  --info-color-light-rgb: 96, 165, 250;
  --info-color-dark: #2563eb;
  --info-color-darker: #1d4ed8;
  --info-color-deepest: #1e3a8a;
  --info-color-sky: #0ea5e9;
  --info-color-bg: #e0e7ff;
  --info-color-bg-rgb: 199, 210, 254;

  /* ---------------------------------------------------------------------------
   * 4. Extended palette
   * ------------------------------------------------------------------------- */
  /* Indigo */
  --indigo-color: #6366f1;
  --indigo-color-rgb: 99, 102, 241;
  --indigo-color-light: #818cf8;
  --indigo-color-light-rgb: 129, 140, 248;
  --indigo-color-dark: #4338ca;
  --indigo-color-deeper: #4f46e5;

  /* Purple / Violet */
  --purple-color: #a855f7;
  --purple-color-rgb: 168, 85, 247;
  --purple-color-dark: #7c3aed;
  --purple-color-darker: #6d28d9;
  --purple-color-violet: #8b5cf6;
  --purple-color-violet-rgb: 139, 92, 246;

  /* Pink */
  --pink-color: #db2777;
  --pink-color-magenta: #ec4899;
  --pink-color-magenta-rgb: 236, 72, 153;

  /* Brand green variants (accent family) */
  --color-brand-green-2dba3e: #2dba3e;
  --color-brand-green-2dba3e-rgb: 45, 186, 62;
  --color-brand-green-3dcc4e: #3dcc4e;
  --color-brand-green-45ce55: #45ce55;
  --color-brand-green-56e066: #56e066;
  --color-brand-green-outer-light: #9be9a8;
  --color-brand-green-outer-med: #9cd4a6;
  --color-brand-green-outer-pale: #ebedf0;
  --color-brand-green-contrib-400: #40c463;
  --color-brand-green-contrib-500: #30a14e;
  --color-brand-green-contrib-600: #216e39;
  --color-brand-green-contrib-700: #2f9a3c;
  --color-brand-green-moss: #6cc24a;
  --color-brand-green-ink-3a: #0d3a17;
  --color-brand-green-ink-3b: #0b3b12;
  --color-brand-green-ink-3d: #0a3d12;
  --color-brand-green-ink-3f: #0f3f18;
  --color-brand-green-ink-1a: #1a8a3e;
  --color-brand-green-ink-1b: #1f7a2b;
  --color-brand-green-ink-1c: #1a9c2b;
  --color-brand-green-ink-2e: #2e9e3d;
  --color-brand-green-ink-2a: #2aa340;
  --color-brand-green-ink-12: #12321a;
  --color-brand-green-ink-2: #0a2e12;
  --color-brand-green-ink-soft: #0b1f0e;
  --color-brand-green-ink-rgb-2e12: 10, 46, 18;
  --color-brand-green-ink-rgb-3d12: 10, 61, 18;

  /* Pure color-wheel primaries (legacy swatches) */
  --color-pure-red: #ff0000;
  --color-pure-green: #00ff00;
  --color-pure-blue: #0000ff;
  --color-pure-cyan: #00ffff;
  --color-pure-magenta: #ff00ff;
  --color-pure-yellow: #ffff00;

  /* ---------------------------------------------------------------------------
   * 5. Base
   * ------------------------------------------------------------------------- */
  --black-color: #000000;
  --black-color-rgb: 0, 0, 0;
  --white-color: #ffffff;
  --white-color-rgb: 255, 255, 255;

  /* ---------------------------------------------------------------------------
   * 6. Role tokens (the vocabulary the rest of the app should prefer)
   * ------------------------------------------------------------------------- */
  /* Backgrounds / surfaces */
  --background-color: #f9f9f9;
  --background-color-subtle: var(--color-slate-50);
  --background-color-muted: var(--color-gray-100);
  --background-color-soft: var(--color-gray-50);
  --background-color-warm: #fafbfb;
  --background-color-cool: #fafbfc;
  --background-color-alt: #f6f7f9;
  --background-color-alt-2: #eef0f3;
  --background-color-elevated: var(--white-color);

  --secondary-bg-color: var(--white-color);
  --tertiary-bg-color: var(--color-slate-100);
  --elevated-bg-color: var(--color-slate-200);

  --surface-color: var(--white-color);
  --surface-color-muted: var(--color-neutral-surface-mint-50);
  --surface-color-alt: var(--color-neutral-surface-mint-100);
  --surface-color-tint: var(--color-neutral-surface-mint-200);
  --surface-color-faint: var(--color-neutral-surface-mint-300);

  --card-bg-color: var(--white-color);
  --card-bg-color-muted: var(--color-neutral-surface-mint-200);

  /* Text */
  --text-color: var(--color-neutral-panel);
  --text-color-rgb: var(--color-neutral-panel-rgb);
  --text-color-primary: var(--color-slate-900);
  --text-color-primary-rgb: var(--color-slate-900-rgb);
  --text-color-secondary: var(--color-slate-700);
  --text-color-muted: var(--color-gray-500);
  --text-color-subtle: var(--color-gray-400);
  --text-color-disabled: var(--color-neutral-border);
  --text-color-inverse: var(--white-color);
  --text-color-on-primary-bg: var(--black-color);
  --text-color-on-dark-bg: var(--white-color);
  --text-color-on-accent: var(--black-color);

  /* Borders */
  --border-color: var(--color-gray-200);
  --border-color-light: var(--color-gray-300);
  --border-color-strong: var(--color-gray-400);
  --border-color-subtle: rgba(var(--black-color-rgb), 0.04);
  --border-color-muted: rgba(var(--black-color-rgb), 0.08);
  --border-color-hover: var(--color-gray-400);
  --border-color-accent: rgba(var(--primary-color-rgb), 0.4);

  /* Shadows (flat tokens — prefer for drop shadows) */
  --shadow-color-subtle: rgba(var(--black-color-rgb), 0.04);
  --shadow-color-soft: rgba(var(--black-color-rgb), 0.08);
  --shadow-color: rgba(var(--black-color-rgb), 0.1);
  --shadow-color-md: rgba(var(--black-color-rgb), 0.15);
  --shadow-color-lg: rgba(var(--black-color-rgb), 0.25);
  --shadow-color-xl: rgba(var(--black-color-rgb), 0.5);

  /* Overlays (page/modal dimmers) */
  --overlay-color: rgba(var(--color-slate-900-rgb), 0.65);
  --overlay-color-strong: rgba(var(--color-slate-900-rgb), 0.92);
  --overlay-color-soft: rgba(var(--color-slate-900-rgb), 0.2);
  --overlay-color-light: rgba(var(--white-color-rgb), 0.75);
  --overlay-color-lighter: rgba(var(--white-color-rgb), 0.45);

  /* Scrollbar */
  --scrollbar-thumb-color: rgba(var(--black-color-rgb), 0.1);
  --scrollbar-thumb-color-hover: rgba(var(--black-color-rgb), 0.18);

  /* Selection */
  --selection-bg-color: var(--primary-color);
  --selection-text-color: var(--black-color);

  /* ---------------------------------------------------------------------------
   * 7. Brand marks
   * ------------------------------------------------------------------------- */
  --linkedin-color: #0a66c2;
  --twitter-color: #1da1f2;
  --telegram-color: #2aabee;
  --telegram-color-rgb: 42, 171, 238;
  --github-color: #24292e;

  /* macOS-style traffic-light window controls */
  --window-close-color: #ff5f57;
  --window-minimize-color: #febc2e;
  --window-maximize-color: #28c840;

  /* Microsoft-style logo tile */
  --ms-tile-red: #f25022;
  --ms-tile-green: #7fba00;
  --ms-tile-blue: #00a4ef;
  --ms-tile-yellow: #ffb900;

  /* ---------------------------------------------------------------------------
   * 8. Legacy aliases
   *    Retained so existing var(--name) references keep working while the
   *    codebase migrates to the role tokens above.
   * ------------------------------------------------------------------------- */
  --bg-primary: var(--background-color-subtle);
  --bg-secondary: var(--secondary-bg-color);
  --bg-tertiary: var(--tertiary-bg-color);
  --bg-elevated: var(--elevated-bg-color);
  --bg-card: var(--card-bg-color);

  --text-primary: var(--text-color-primary);
  --text-primary-rgb: var(--text-color-primary-rgb);
  --text-secondary: rgba(var(--text-color-primary-rgb), 0.78);
  --text-muted: rgba(var(--text-color-primary-rgb), 0.55);
  --text-dim: rgba(var(--text-color-primary-rgb), 0.4);
  --text-faint: rgba(var(--text-color-primary-rgb), 0.28);

  --border-light: var(--border-color-light);
  --border-hover: var(--border-color-hover);

  --accent: var(--primary-color);
  --accent-dark: var(--primary-color-dark);
  --accent-glow: rgba(var(--primary-color-rgb), 0.14);
  --accent-glow-strong: rgba(var(--primary-color-rgb), 0.22);
  --accent-border: rgba(var(--primary-color-rgb), 0.4);
  --accent-border-soft: rgba(var(--primary-color-rgb), 0.25);
  --accent-bg-subtle: rgba(var(--primary-color-rgb), 0.08);
  --accent-bg-hover: rgba(var(--primary-color-rgb), 0.16);
  --accent-shadow: rgba(var(--primary-color-rgb), 0.4);
  --accent-shadow-md: rgba(var(--primary-color-rgb), 0.25);
  --accent-text: var(--primary-color-deep);

  --text-on-accent: var(--black-color);

  --danger: var(--danger-color);
  --danger-glow: rgba(var(--danger-color-rgb), 0.1);
  --danger-border: rgba(var(--danger-color-rgb), 0.35);
  --danger-text: var(--danger-color-dark);

  --success: var(--success-color-emerald);
  --success-glow: rgba(var(--success-color-emerald-rgb), 0.1);
  --success-border: rgba(var(--success-color-emerald-rgb), 0.3);

  --shadow-card: rgba(var(--text-color-primary-rgb), 0.06);
  --shadow-modal: rgba(var(--text-color-primary-rgb), 0.18);
  --shadow-glow: rgba(var(--text-color-primary-rgb), 0.06);

  --navbar-bg: rgba(var(--white-color-rgb), 0.85);
  --footer-bg: rgba(var(--white-color-rgb), 0.75);
}