/* ============================================================
   POLARIS INSURANCE GROUP — Design Tokens
   Colors, type, spacing, radii, elevation
   ============================================================ */

/* Webfont: Inter (via Google Fonts CDN). If self-hosting,
   replace with @font-face pointing at fonts/Inter-*.woff2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -----------------------------------------------
     BRAND — sourced from the official Polaris logo
     ----------------------------------------------- */
  --polaris-navy:        #1e293b;   /* logo wordmark */
  --polaris-navy-deep:   #0f172a;   /* full-dark surface */
  --polaris-gold:        #f5bc2d;   /* logo swoosh */
  --polaris-gold-soft:   #fde68a;
  --polaris-silver:      #b8bcc4;   /* logo "INSURANCE GROUP" tag */

  /* -----------------------------------------------
     PRODUCT — used inside the platform UI
     ----------------------------------------------- */
  --primary:             #1e293b;   /* Deep Navy — trust */
  --accent:              #3b82f6;   /* Accent Blue — interactive */
  --accent-hover:        #2563eb;
  --accent-pressed:      #1d4ed8;
  --accent-tint:         #dbeafe;
  --accent-tint-strong:  #93c5fd;

  /* Status / semantic */
  --success:             #10b981;
  --success-tint:        #d1fae5;
  --warning:             #f59e0b;
  --warning-tint:        #fef3c7;
  --danger:              #ef4444;
  --danger-tint:         #fee2e2;
  --info:                #06b6d4;
  --info-tint:           #cffafe;

  /* Neutral scale (slate) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Semantic surfaces / text (LIGHT) */
  --bg:                  var(--slate-50);
  --bg-elev:             #ffffff;
  --surface:             #ffffff;
  --surface-muted:       var(--slate-100);
  --border:              var(--slate-200);
  --border-strong:       var(--slate-300);
  --fg1:                 var(--slate-900);   /* primary text */
  --fg2:                 var(--slate-500);   /* secondary text */
  --fg3:                 var(--slate-400);   /* tertiary / placeholder */
  --fg-inverse:          #ffffff;
  --link:                var(--accent);

  /* Status foreground (text/icon on tint) + extra tints */
  --success-fg:  #047857;
  --warning-fg:  #92400e;
  --danger-fg:   #b91c1c;
  --info-fg:     #0e7490;
  --accent-fg:   var(--accent-pressed);
  --violet:      #8b5cf6;
  --violet-tint: #ede9fe;
  --violet-fg:   #6d28d9;

  /* Glass / overlay */
  --glass-bg:            rgba(255, 255, 255, 0.72);
  --glass-bg-strong:     rgba(255, 255, 255, 0.86);
  --glass-border:        rgba(226, 232, 240, 0.8);
  --backdrop-blur:       saturate(180%) blur(18px);
  --scrim:               rgba(15, 23, 42, 0.45);

  /* -----------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------- */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* Type scale — modular, anchored at 14px base for dashboard density */
  --fs-display:  44px;  --lh-display: 1.1;   --tr-display: -0.022em;
  --fs-h1:       30px;  --lh-h1:      1.18;  --tr-h1:      -0.02em;
  --fs-h2:       22px;  --lh-h2:      1.25;  --tr-h2:      -0.015em;
  --fs-h3:       18px;  --lh-h3:      1.33;  --tr-h3:      -0.01em;
  --fs-h4:       15px;  --lh-h4:      1.4;   --tr-h4:      -0.005em;
  --fs-body:     14px;  --lh-body:    1.5;   --tr-body:    0;
  --fs-body-sm:  13px;  --lh-body-sm: 1.46;
  --fs-caption:  12px;  --lh-caption: 1.4;
  --fs-eyebrow:  11px;  --lh-eyebrow: 1.3;   --tr-eyebrow: 0.08em;
  --fs-mono:     12.5px;

  /* -----------------------------------------------
     SPACING — 4/8px grid
     ----------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  /* -----------------------------------------------
     RADII
     ----------------------------------------------- */
  --r-xs: 4px;     /* buttons, chips, inputs */
  --r-sm: 6px;
  --r-md: 8px;     /* cards */
  --r-lg: 12px;    /* large panels */
  --r-xl: 16px;
  --r-pill: 999px;

  /* -----------------------------------------------
     ELEVATION
     ----------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.25);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* -----------------------------------------------
     MOTION
     ----------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Snappy ease-out for sub-200ms feedback (button press, tap) */
  --ease-snap:   cubic-bezier(0.23, 1, 0.32, 1);
  /* iOS-style drawer curve (Ionic) — settles softly on long slides */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   360ms;
  /* Asymmetric drawer timings: enter 320 / exit 220 (slower in, faster out) */
  --t-drawer-in:  320ms;
  --t-drawer-out: 220ms;

  /* -----------------------------------------------
     Z-INDEX SCALE — singura ierarhie permisă
     ----------------------------------------------- */
  --z-topbar:   50;
  --z-dropdown: 70;   /* ws-menu, notif-panel, meniuri din topbar */
  --z-scrim:    80;
  --z-drawer:   81;
  --z-modal:    90;   /* mini-modal, confirm */
  --z-toast:   100;
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --bg:            #0a1120;
  --bg-elev:       #0f172a;
  --surface:       #1e293b;
  --surface-muted: #1a2336;
  --border:        #243049;
  --border-strong: #334155;
  --fg1:           #f1f5f9;
  --fg2:           #94a3b8;
  --fg3:           #64748b;
  --accent-tint:   rgba(59, 130, 246, 0.18);
  --accent-pressed: #93c5fd;
  --accent-fg:     #bfdbfe;
  --success-tint:  rgba(16, 185, 129, 0.16);  --success-fg: #6ee7b7;
  --warning-tint:  rgba(245, 158, 11, 0.16);  --warning-fg: #fcd34d;
  --danger-tint:   rgba(239, 68, 68, 0.16);   --danger-fg:  #fca5a5;
  --info-tint:     rgba(6, 182, 212, 0.16);   --info-fg:    #67e8f9;
  --violet-tint:   rgba(139, 92, 246, 0.20);  --violet-fg:  #c4b5fd;
  --glass-bg:        rgba(30, 41, 59, 0.62);
  --glass-bg-strong: rgba(30, 41, 59, 0.82);
  --glass-border:    rgba(51, 65, 85, 0.6);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.6);
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */
html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: var(--fw-bold); }
.t-h1, h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: var(--fw-semi); }
.t-h2, h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--fw-semi); }
.t-h3, h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-semi); }
.t-h4, h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semi); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg2); }
.t-eyebrow { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: var(--fw-semi); color: var(--fg2); }
.t-mono    { font-family: var(--font-mono); font-size: var(--fs-mono); }
.t-num     { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Subtle helpers */
.fg-muted { color: var(--fg2); }
.fg-faint { color: var(--fg3); }