/* ============================================================
   Powly Design Tokens
   ============================================================
   Single source of truth for colors, spacing, typography,
   radii, and shadows. All component styles reference these.

   Usage:
     Light mode (default): just include this file
     Dark mode: add class="dark" to any container element

   Based on: BRAND.md palette + actual codebase usage analysis
   ============================================================ */


/* ----- LIGHT PALETTE (App) ----- */

:root {

  /* --- Brand --- */
  --color-brand:            #4A90D9;  /* Powder Blue — logo, nav, marketing */
  --color-brand-dark:       #3A7BC8;  /* Powder Blue hover */
  --color-glacier:          #E0F2FE;  /* Glacier — light accent backgrounds, cards */
  --color-mountain-dark:    #1E3A5F;  /* Mountain Dark — headings, hero text */

  /* --- Primary (Interactive) --- */
  --color-primary:          #3b82f6;  /* Blue 500 — buttons, links, toggles */
  --color-primary-hover:    #2563eb;  /* Blue 600 */
  --color-primary-light:    #dbeafe;  /* Blue 100 — selected backgrounds */
  --color-primary-muted:    #93c5fd;  /* Blue 300 — disabled / subtle */

  /* --- Backgrounds --- */
  --color-bg:               #F8FAFC;  /* Alpine White — page background */
  --color-surface:          #ffffff;  /* Cards, panels, modals */
  --color-surface-hover:    #f1f5f9;  /* Slate 100 — hover state on surfaces */
  --color-surface-active:   #e2e8f0;  /* Slate 200 — active/pressed */

  /* --- Text --- */
  --color-text:             #1e293b;  /* Slate 800 — primary text */
  --color-text-secondary:   #64748b;  /* Slate 500 — labels, descriptions */
  --color-text-muted:       #94a3b8;  /* Slate 400 — placeholders, disabled */
  --color-text-inverse:     #ffffff;  /* Text on colored backgrounds */

  /* --- Borders --- */
  --color-border:           #e2e8f0;  /* Slate 200 — default border */
  --color-border-strong:    #cbd5e1;  /* Slate 300 — emphasized borders */
  --color-border-focus:     #3b82f6;  /* = primary, for focus rings */

  /* --- Semantic / Functional --- */
  --color-success:          #10b981;  /* Emerald 500 — GPS, active, visited */
  --color-success-light:    #d1fae5;  /* Emerald 100 */
  --color-warning:          #f59e0b;  /* Amber 500 — favorites, alerts */
  --color-warning-light:    #fef3c7;  /* Amber 100 */
  --color-danger:           #ef4444;  /* Red 500 — errors, delete */
  --color-danger-light:     #fee2e2;  /* Red 100 */
  --color-accent:           #F97316;  /* Sunset Orange — CTAs, highlights */
  --color-accent-hover:     #ea580c;  /* Orange 600 */

  /* --- Country colors (map markers) --- */
  --color-at:               #C08080;  /* Austria */
  --color-de:               #C9B037;  /* Germany */
  --color-ch:               #9E9E9E;  /* Switzerland */
  --color-it:               #7D8B6A;  /* Italy */
  --color-fr:               #7896A8;  /* France */
  --color-si:               #6BA3A0;  /* Slovenia */

  /* --- Ski pass colors --- */
  --color-sct:              #9C2419;  /* Snow Card Tirol */
  --color-ssc:              #004A8F;  /* SuperSkiCard */
  --color-pass-both:        #9C27B0;  /* Both passes */

  /* --- Snow scale --- */
  --color-snow-light:       #A5D6F7;  /* Low snow depth */
  --color-snow-deep:        #1565C0;  /* Deep snow */
  --color-snowflake-start:  #43C4F5;  /* Snowflake gradient start */
  --color-snowflake-end:    #3D8DF3;  /* Snowflake gradient end */


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


  /* ----- BORDER RADIUS ----- */
  --radius-sm:    4px;   /* Small chips, tags */
  --radius-md:    8px;   /* Buttons, inputs, cards */
  --radius-lg:   12px;   /* Modals, panels */
  --radius-xl:   16px;   /* Bottom sheets, large cards */
  --radius-full: 9999px; /* Pills, avatars */


  /* ----- TYPOGRAPHY ----- */
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;  /* Logo / brand headings */
  --font-mono:    'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;

  --text-xs:     11px;   /* Fine print, badges */
  --text-sm:     12px;   /* Captions, small labels */
  --text-base:   13px;   /* Default body text (map UI) */
  --text-md:     14px;   /* Body text, descriptions */
  --text-lg:     16px;   /* Section titles, prominent text */
  --text-xl:     18px;   /* Card titles */
  --text-2xl:    20px;   /* Page subtitles */
  --text-3xl:    24px;   /* Section headings */
  --text-4xl:    32px;   /* Page headings */

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

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


  /* ----- SHADOWS ----- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 12px 32px rgba(0, 0, 0, 0.18);


  /* ----- TRANSITIONS ----- */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;


  /* ----- Z-INDEX SCALE ----- */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-popover:    500;
  --z-toast:      600;
}


/* ----- DARK PALETTE ----- */
/* Apply with class="dark" on any container.
   Social media templates, future app dark mode. */

.dark {

  /* --- Background gradient base colors --- */
  --color-bg:               #0F1F33;  /* Deepest navy */
  --color-bg-gradient-start: #1E3A5F; /* Mountain Dark */
  --color-bg-gradient-mid:   #0F1F33;
  --color-bg-gradient-end:   #162D4A;
  --color-surface:          rgba(255, 255, 255, 0.06);
  --color-surface-hover:    rgba(255, 255, 255, 0.10);
  --color-surface-active:   rgba(255, 255, 255, 0.14);

  /* --- Primary shifts lighter on dark bg --- */
  --color-primary:          #60a5fa;  /* Blue 400 */
  --color-primary-hover:    #93c5fd;  /* Blue 300 */
  --color-primary-light:    rgba(74, 144, 217, 0.15);
  --color-primary-muted:    rgba(74, 144, 217, 0.10);

  /* --- Glacier shifts to subtle dark tint --- */
  --color-glacier:          rgba(74, 144, 217, 0.10);

  /* --- Brand accent (templates use this on dark) --- */
  --color-brand:            #4A90D9;
  --color-brand-dark:       #3B7BC8;

  /* --- Text --- */
  --color-text:             #F8FAFC;
  --color-text-secondary:   rgba(248, 250, 252, 0.6);
  --color-text-muted:       rgba(248, 250, 252, 0.4);
  --color-text-inverse:     #1e293b;

  /* --- Borders --- */
  --color-border:           rgba(255, 255, 255, 0.08);
  --color-border-strong:    rgba(255, 255, 255, 0.15);
  --color-border-focus:     #60a5fa;

  /* --- Functional colors shift lighter --- */
  --color-success:          #4ADE80;  /* Green 400 */
  --color-success-light:    rgba(74, 222, 128, 0.12);
  --color-warning:          #fbbf24;  /* Amber 400 */
  --color-warning-light:    rgba(251, 191, 36, 0.12);
  --color-danger:           #f87171;  /* Red 400 */
  --color-danger-light:     rgba(248, 113, 113, 0.12);
  --color-accent:           #fb923c;  /* Orange 400 */
  --color-accent-hover:     #F97316;

  /* --- Shadows become glows on dark --- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 12px 32px rgba(0, 0, 0, 0.6);
}

/* --- Global scrollbar: thin, transparent track --- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }
.dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
.dark *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
.dark * { scrollbar-color: rgba(255,255,255,0.2) transparent; }