/* =============================================================
   PERRYWEATHER DESIGN SYSTEM — tokens
   Colors, type, spacing, radii, elevation, motion.
   ============================================================= */

/* --- WEBFONTS ------------------------------------------------
   Proxima Nova is the brand font (uploaded .otf/.ttf in /fonts/).
   Used for body, UI labels, and as a tighter fallback for display.
   Circular Std (display, source spec) is still substituted to
   Manrope until real files arrive. Inter remains for the cleaner
   grotesque UI fallback only.
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');

/* Proxima Nova — brand font (real files) */
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/proximanova_light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/proximanova_regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/proximanova_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/proximanova_boldit.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/proximanova_extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/proximanova_black.otf') format('opentype'),
       url('./fonts/proximanova_black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/proximanova_blackit.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* PW Display — Circular Std substitute (Manrope) until licensed file arrives */
@font-face {
  font-family: 'PW Display';
  src: local('Circular Std Book'), local('CircularStd-Book');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PW Display';
  src: local('Circular Std Medium'), local('CircularStd-Medium');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ============ COLOR — BASE / NEUTRAL ============ */
  --pw-base-900: #0F151E;   /* canvas (dark) */
  --pw-base-850: #121A24;
  --pw-base-800: #17202C;   /* card on dark */
  --pw-base-700: #1F2936;
  --pw-base-600: #293442;   /* hairline border on dark */
  --pw-base-500: #35404F;
  --pw-base-400: #414C5B;
  --pw-base-300: #4F5A68;
  --pw-base-200: #626B77;
  --pw-base-100: #767F8A;
  --pw-base-050: #B4BCC6;
  --pw-base-025: #DBDFE3;
  --pw-base-010: #F0F3F6;   /* canvas (light) */
  --pw-base-000: #FFFFFF;

  /* ============ COLOR — PRIMARY (SKY/CYAN) ============ */
  --pw-primary-900: #153360;
  --pw-primary-800: #1F4676;
  --pw-primary-700: #2F628F;
  --pw-primary-600: #306491;
  --pw-primary-500: #4687B3;
  --pw-primary-400: #60B1D7;
  --pw-primary-300: #7DDEFB;   /* core brand cyan */
  --pw-primary-200: #9CEEFD;
  --pw-primary-100: #B0F9FD;
  --pw-primary-075: #CAFDFB;
  --pw-primary-050: #E4FEFB;

  /* ============ COLOR — DANGER (CORAL) ============ */
  --pw-danger-900: #310B08;   /* banner bg */
  --pw-danger-800: #721329;
  --pw-danger-700: #882836;
  --pw-danger-600: #AA3A42;
  --pw-danger-500: #CB4F4E;
  --pw-danger-400: #EE7064;   /* core */
  --pw-danger-300: #F29C8A;
  --pw-danger-200: #F5B6A2;
  --pw-danger-100: #F9D4C1;
  --pw-danger-050: #FCECE0;

  /* ============ COLOR — WARNING (YELLOW-GREEN) ============ */
  --pw-warning-900: #29260A;   /* banner bg */
  --pw-warning-800: #676D13;
  --pw-warning-700: #7F842F;
  --pw-warning-600: #9EA43F;
  --pw-warning-500: #BEC451;
  --pw-warning-400: #DFE566;   /* core */
  --pw-warning-300: #EAEF80;
  --pw-warning-200: #F4F79F;
  --pw-warning-100: #FAFCBF;
  --pw-warning-050: #FCFDDE;

  /* ============ COLOR — SUCCESS (MINT) ============ */
  --pw-success-900: #142828;   /* banner bg */
  --pw-success-800: #16643A;
  --pw-success-700: #4C8A5F;
  --pw-success-600: #68AC77;
  --pw-success-500: #8BCE93;
  --pw-success-400: #B3F1B5;   /* core */
  --pw-success-300: #C5F5C2;
  --pw-success-200: #D3FACD;
  --pw-success-100: #E5FCDE;
  --pw-success-050: #F3FEEE;

  /* ============ COLOR — BRAND ACCENTS ============ */
  --pw-bolt-from: #FFE37E;     /* lightning gradient stop 0 */
  --pw-bolt-to:   #22BACF;     /* lightning gradient stop 100 */
  --pw-bolt-grad: linear-gradient(207.43deg, #FFE37E -10.71%, #22BACF 131.76%);
  --pw-bolt-grad-hover: linear-gradient(207.43deg, #FFEB99 -10.71%, #56C9D9 131.76%);
  --pw-logo-mint: #75CAB1;     /* perry/weather wordmark fill */

  /* ============ SEMANTIC — DARK THEME (default) ============ */
  --pw-canvas:        var(--pw-base-900);
  --pw-surface:       var(--pw-base-800);
  --pw-surface-2:     var(--pw-base-700);
  --pw-hairline:      var(--pw-base-600);
  --pw-fg:            #FFFFFF;
  --pw-fg-muted:      #B4BCC6;
  --pw-fg-faint:      #767F8A;
  --pw-fg-inverse:    #0F151E;
  --pw-link:          var(--pw-primary-300);

  /* ============ TYPE — FAMILIES ============ */
  --pw-font-display: 'Proxima Nova', 'PW Display', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pw-font-body:    'Proxima Nova', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pw-font-ui:      'Proxima Nova', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pw-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============ TYPE — SCALE ============ */
  --pw-fs-h1: 64px;   --pw-lh-h1: 72px;   --pw-ls-h1: -1.5px;
  --pw-fs-h2: 48px;   --pw-lh-h2: 56px;   --pw-ls-h2: -1.5px;
  --pw-fs-h3: 40px;   --pw-lh-h3: 48px;   --pw-ls-h3: -1.0px;
  --pw-fs-h4: 32px;   --pw-lh-h4: 40px;   --pw-ls-h4: -0.5px;
  --pw-fs-h5: 24px;   --pw-lh-h5: 32px;   --pw-ls-h5: -0.5px;
  --pw-fs-headline: 18px; --pw-lh-headline: 24px;
  --pw-fs-body: 16px; --pw-lh-body: 24px; --pw-ls-body: -0.15px;
  --pw-fs-caption: 13px; --pw-lh-caption: 16px;
  --pw-fs-overline: 11px; --pw-lh-overline: 16px; --pw-ls-overline: 1.5px;

  /* PW Text — the tighter in-app scale (current PW shipping app) */
  --pw-fs-pw-header: 30px;
  --pw-fs-pw-subtitle: 22px;
  --pw-fs-pw-subtitle2: 18px;
  --pw-fs-pw-body: 16px;
  --pw-fs-pw-caption: 12px;
  --pw-fs-pw-modal: 16px;

  /* ============ SPACING (8px grid, t-shirt) ============ */
  --pw-space-xs: 4px;
  --pw-space-s:  8px;
  --pw-space-m:  16px;
  --pw-space-l:  24px;
  --pw-space-xl: 32px;
  --pw-space-xxl: 56px;
  --pw-space-xxxl: 88px;

  /* ============ RADII ============ */
  --pw-radius-sm: 5px;
  --pw-radius-md: 8px;
  --pw-radius-lg: 12px;
  --pw-radius-pill: 100px;
  --pw-radius-circle: 9999px;

  /* ============ BORDERS ============ */
  --pw-border-hairline: 1px solid var(--pw-hairline);
  --pw-border-focus: 3px solid var(--pw-primary-300);

  /* ============ ELEVATION ============ */
  --pw-shadow-low:    none;
  --pw-shadow-medium: 0 1px 2px 0 rgba(0,0,0,0.05);
  --pw-shadow-high:   0 8px 24px -4px rgba(0,0,0,0.32), 0 2px 6px 0 rgba(0,0,0,0.18);
  --pw-ring-focus:    0 0 0 2px var(--pw-canvas), 0 0 0 4px rgba(96,177,215,0.30);

  /* ============ MOTION ============ */
  --pw-ease: cubic-bezier(.2,.7,.2,1);
  --pw-dur-hover: 160ms;
  --pw-dur-press: 80ms;
  --pw-dur-panel: 300ms;
}

/* Light theme — flip semantic vars only */
[data-theme="light"] {
  --pw-canvas:        var(--pw-base-010);
  --pw-surface:       #FFFFFF;
  --pw-surface-2:     #FFFFFF;
  --pw-hairline:      var(--pw-base-025);
  --pw-fg:            var(--pw-base-850);
  --pw-fg-muted:      var(--pw-base-200);
  --pw-fg-faint:      var(--pw-base-100);
  --pw-fg-inverse:    #FFFFFF;
  --pw-shadow-medium: 0 1px 2px 0 rgba(0,0,0,0.05);
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */
.pw-h1 {
  font-family: var(--pw-font-display);
  font-weight: 500;
  font-size: var(--pw-fs-h1);
  line-height: var(--pw-lh-h1);
  letter-spacing: var(--pw-ls-h1);
  color: var(--pw-fg);
}
.pw-h2 {
  font-family: var(--pw-font-display);
  font-weight: 500;
  font-size: var(--pw-fs-h2);
  line-height: var(--pw-lh-h2);
  letter-spacing: var(--pw-ls-h2);
  color: var(--pw-fg);
}
.pw-h3 {
  font-family: var(--pw-font-display);
  font-weight: 500;
  font-size: var(--pw-fs-h3);
  line-height: var(--pw-lh-h3);
  letter-spacing: var(--pw-ls-h3);
  color: var(--pw-fg);
}
.pw-h4 {
  font-family: var(--pw-font-display);
  font-weight: 600;
  font-size: var(--pw-fs-h4);
  line-height: var(--pw-lh-h4);
  letter-spacing: var(--pw-ls-h4);
  color: var(--pw-fg);
}
.pw-h5 {
  font-family: var(--pw-font-body);
  font-weight: 600;
  font-size: var(--pw-fs-h5);
  line-height: var(--pw-lh-h5);
  letter-spacing: var(--pw-ls-h5);
  color: var(--pw-fg);
}
.pw-headline {
  font-family: var(--pw-font-body);
  font-weight: 500;
  font-size: var(--pw-fs-headline);
  line-height: var(--pw-lh-headline);
  color: var(--pw-fg);
}
.pw-body {
  font-family: var(--pw-font-body);
  font-weight: 400;
  font-size: var(--pw-fs-body);
  line-height: var(--pw-lh-body);
  letter-spacing: var(--pw-ls-body);
  color: var(--pw-fg);
}
.pw-body-strong {
  font-family: var(--pw-font-body);
  font-weight: 700;
  font-size: var(--pw-fs-body);
  line-height: var(--pw-lh-body);
  letter-spacing: var(--pw-ls-body);
  color: var(--pw-fg);
}
.pw-caption {
  font-family: var(--pw-font-ui);
  font-weight: 400;
  font-size: var(--pw-fs-caption);
  line-height: var(--pw-lh-caption);
  color: var(--pw-fg-muted);
}
.pw-overline {
  font-family: var(--pw-font-ui);
  font-weight: 700;
  font-size: var(--pw-fs-overline);
  line-height: var(--pw-lh-overline);
  letter-spacing: var(--pw-ls-overline);
  text-transform: uppercase;
  color: var(--pw-fg-muted);
}
.pw-label {
  font-family: var(--pw-font-ui);
  font-weight: 500;
  font-size: var(--pw-fs-body);
  line-height: var(--pw-lh-body);
  color: var(--pw-fg);
}
.pw-mono {
  font-family: var(--pw-font-mono);
  font-size: var(--pw-fs-caption);
  font-feature-settings: 'tnum';
}

/* Number / metric display — tabular figures for dashboards */
.pw-metric {
  font-family: var(--pw-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* =============================================================
   ROOT / BODY DEFAULTS
   ============================================================= */
.pw-root {
  background: var(--pw-canvas);
  color: var(--pw-fg);
  font-family: var(--pw-font-body);
  font-size: var(--pw-fs-body);
  line-height: var(--pw-lh-body);
  letter-spacing: var(--pw-ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}