/* ============================================================
   SOLIDARITY DESIGN SYSTEM — Design Tokens
   ============================================================ */

:root {
  /* ---------- Brand Colors ---------- */
  --sol-primary-50:  #E6F1FE;
  --sol-primary-100: #CCE3FC;
  --sol-primary-200: #99C7FA;
  --sol-primary-300: #66AAF7;
  --sol-primary-400: #338EF4;
  --sol-primary-500: #0074F1;  /* Brand Primary */
  --sol-primary-600: #005DC1;
  --sol-primary-700: #004691;
  --sol-primary-800: #032E70;
  --sol-primary-900: #041C50;  /* Brand Deep */
  --sol-primary-950: #02102E;

  /* ---------- Secondary / Accents ---------- */
  --sol-sky:     #BEE6FD;
  --sol-lilac:   #B7B1F8;
  --sol-mint:    #80E19E;
  --sol-amber:   #FCC74A;
  --sol-cyan:    #82FDFF;
  --sol-sand:    #F7EEE2;
  --sol-ice:     #E6F1FE;
  --sol-coral:   #F97B63;

  /* ---------- Neutrals (warm cool-gray) ---------- */
  --sol-gray-0:   #FFFFFF;
  --sol-gray-25:  #FCFCFD;
  --sol-gray-50:  #F8F9FB;
  --sol-gray-100: #F1F3F7;
  --sol-gray-200: #E4E7EE;
  --sol-gray-300: #CDD2DC;
  --sol-gray-400: #9AA1B1;
  --sol-gray-500: #6B7385;
  --sol-gray-600: #4A5264;
  --sol-gray-700: #343B4B;
  --sol-gray-800: #1F2533;
  --sol-gray-900: #121624;
  --sol-gray-950: #0A0D17;

  /* ---------- Semantic ---------- */
  --sol-success: #16A34A;
  --sol-success-bg: #80E19E;
  --sol-success-soft: #E8F9EE;

  --sol-warning: #B45309;
  --sol-warning-bg: #FCC74A;
  --sol-warning-soft: #FDF5E2;

  --sol-error: #C2410C;
  --sol-error-bg: #F97B63;
  --sol-error-soft: #FEECE6;

  --sol-info: #0074F1;
  --sol-info-bg: #BEE6FD;
  --sol-info-soft: #E6F1FE;

  /* ---------- Surfaces (Light) ---------- */
  --surface-bg:       var(--sol-gray-50);
  --surface-panel:    var(--sol-gray-0);
  --surface-subtle:   var(--sol-gray-100);
  --surface-muted:    var(--sol-gray-200);
  --surface-inverse:  var(--sol-gray-900);
  --surface-hover:    var(--sol-gray-100);   /* row-hover, cell-hover */

  --border-subtle:   var(--sol-gray-200);
  --border-default:  var(--sol-gray-300);
  --border-strong:   var(--sol-gray-400);
  --border-focus:    var(--sol-primary-500);

  --text-primary:    var(--sol-gray-900);
  --text-secondary:  var(--sol-gray-600);
  --text-tertiary:   var(--sol-gray-500);
  --text-disabled:   var(--sol-gray-400);
  --text-inverse:    var(--sol-gray-0);
  --text-brand:      var(--sol-primary-500);
  --text-brand-deep: var(--sol-primary-900);

  /* ---------- Type ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, serif;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  72px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

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

  /* ---------- Spacing (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 48px;
  --sp-11: 64px;
  --sp-12: 80px;
  --sp-13: 96px;
  --sp-14: 128px;

  /* ---------- Radius ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  24px;
  --r-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 22, 36, 0.05);
  --shadow-sm: 0 1px 3px rgba(18, 22, 36, 0.08), 0 1px 2px rgba(18, 22, 36, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(18, 22, 36, 0.08), 0 2px 4px -2px rgba(18, 22, 36, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(18, 22, 36, 0.10), 0 4px 8px -4px rgba(18, 22, 36, 0.04);
  --shadow-xl: 0 20px 32px -8px rgba(18, 22, 36, 0.12), 0 8px 16px -8px rgba(18, 22, 36, 0.05);
  --shadow-2xl: 0 32px 48px -12px rgba(18, 22, 36, 0.18);
  --shadow-focus: 0 0 0 4px rgba(0, 116, 241, 0.18);
  --shadow-focus-error: 0 0 0 4px rgba(249, 123, 99, 0.24);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --nav-h: 64px;

  /* ---------- Overlay (modal backdrop, themeable) ---------- */
  --overlay-bg: rgba(10, 13, 23, 0.55);

  /* ---------- Stroke / inset overlays (themeable) ----------
     For thin 1px insets on top of light or dark surfaces. Replaces
     inline `inset 0 0 0 1px rgba(0,0,0,0.08)` patterns across SVGs
     and tile components. Flips automatically in dark mode. */
  --stroke-overlay:      rgba(18, 22, 36, 0.10);
  --stroke-overlay-soft: rgba(18, 22, 36, 0.08);

  /* ---------- Tone tints (themeable) ----------
     Soft backgrounds + borders for status callouts. Use these in
     `.uw-outlook.tone-*`, `.sign-env.tone-*`, `.uw-reason.tone-*`,
     and inline empty-state-icon backgrounds. Each pair flips in dark
     mode below. */
  --tone-success-bg-soft:    rgba(22, 163, 74, 0.06);
  --tone-success-bg-strong:  rgba(22, 163, 74, 0.10);
  --tone-success-border:     rgba(22, 163, 74, 0.25);
  --tone-success-border-strong: rgba(22, 163, 74, 0.40);

  --tone-warning-bg-soft:    rgba(217, 119, 6, 0.06);
  --tone-warning-bg-strong:  rgba(252, 199, 74, 0.14);
  --tone-warning-border:     rgba(217, 119, 6, 0.30);
  --tone-warning-border-strong: rgba(217, 119, 6, 0.40);

  --tone-error-bg-soft:      rgba(194, 65, 12, 0.06);
  --tone-error-bg-strong:    rgba(194, 65, 12, 0.10);
  --tone-error-border:       rgba(194, 65, 12, 0.30);
  --tone-error-border-strong: rgba(194, 65, 12, 0.45);

  --tone-info-bg-soft:       rgba(0, 116, 241, 0.06);
  --tone-info-bg-strong:     rgba(0, 116, 241, 0.14);
  --tone-info-border:        rgba(0, 116, 241, 0.25);
  --tone-info-border-strong: rgba(0, 116, 241, 0.45);

  /* ---------- Distribution-channel colors ----------
     Used for agent-type icons (Bancassurance / Agency / Broker) on
     the Admin PCM and AdminCompanies screens. */
  --channel-banca:  var(--sol-cyan);
  --channel-banca-strong:  #0BA5A5;   /* teal — used for icon foreground */
  --channel-agency: var(--sol-lilac);
  --channel-agency-strong: #7B61FF;   /* violet — used for icon foreground */
  --channel-broker: var(--sol-coral);
  --channel-broker-strong: #F97B63;   /* coral — used for icon foreground */

  /* ---------- IRP / investment accent ----------
     Lilac/violet hue used for the Investment Risk Profile gate and
     the badge-lilac component. */
  --accent-irp:        var(--sol-lilac);
  --accent-irp-strong: #7B61FF;       /* solid violet — icon foreground */
  --accent-irp-bg:     rgba(126, 58, 184, 0.14);
}

/* ============================================================
   THIRD-PARTY / EXTERNAL BRAND COLORS — DO NOT TOKENIZE
   ============================================================
   The following hardcoded colors live in the codebase intentionally
   and must NOT be replaced with Solidarity tokens:

   1. Country flag SVGs in `src/icons.jsx` — national flag colors
      (e.g., #CE1126 for the Bahraini flag red) are spec-defined and
      must remain accurate.
   2. Company logo SVGs in `src/data.jsx` — each Solidarity entity's
      branded gradient (BH blue, KW green, AE red).
   3. Identity-provider tile colors in `src/screens/Login.jsx` —
      Microsoft / Google / Okta brand tile colors, kept verbatim
      for recognisability.
   4. PDF-preview "paper" surface in `styles/compare-and-client.css`
      — intentionally white in both themes (the customer-approval
      preview mimics a printed page).
*/

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --surface-bg:       var(--sol-gray-950);
  --surface-panel:    var(--sol-gray-900);
  --surface-subtle:   var(--sol-gray-800);
  --surface-muted:    var(--sol-gray-700);
  --surface-inverse:  var(--sol-gray-0);
  --surface-hover:    var(--sol-gray-800);

  --border-subtle:   #1E2433;
  --border-default:  #2A3142;
  --border-strong:   #3C4356;
  --border-focus:    var(--sol-primary-400);

  --text-primary:    #F1F3F7;
  --text-secondary:  #A0A8BA;
  --text-tertiary:   #7A8193;
  --text-disabled:   #4A5264;
  --text-inverse:    var(--sol-gray-900);
  --text-brand:      var(--sol-primary-300);
  --text-brand-deep: #99C7FA;

  --sol-success-soft: #0F2A1A;
  --sol-warning-soft: #2E220A;
  --sol-error-soft:   #2A120B;
  --sol-info-soft:    #0B1E3A;

  --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 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 4px rgba(51, 142, 244, 0.3);

  --overlay-bg: rgba(0, 0, 0, 0.65);

  /* Stroke overlays inverted for dark surfaces. */
  --stroke-overlay:      rgba(255, 255, 255, 0.10);
  --stroke-overlay-soft: rgba(255, 255, 255, 0.06);

  /* Tone tints — slightly stronger alpha on dark surfaces so the
     hue stays visible against `--surface-panel`. */
  --tone-success-bg-soft:    rgba(128, 225, 158, 0.10);
  --tone-success-bg-strong:  rgba(128, 225, 158, 0.16);
  --tone-success-border:     rgba(128, 225, 158, 0.32);
  --tone-success-border-strong: rgba(128, 225, 158, 0.50);

  --tone-warning-bg-soft:    rgba(252, 199, 74, 0.10);
  --tone-warning-bg-strong:  rgba(252, 199, 74, 0.18);
  --tone-warning-border:     rgba(252, 199, 74, 0.32);
  --tone-warning-border-strong: rgba(252, 199, 74, 0.50);

  --tone-error-bg-soft:      rgba(249, 123, 99, 0.10);
  --tone-error-bg-strong:    rgba(249, 123, 99, 0.18);
  --tone-error-border:       rgba(249, 123, 99, 0.32);
  --tone-error-border-strong: rgba(249, 123, 99, 0.50);

  --tone-info-bg-soft:       rgba(102, 170, 247, 0.10);
  --tone-info-bg-strong:     rgba(102, 170, 247, 0.18);
  --tone-info-border:        rgba(102, 170, 247, 0.32);
  --tone-info-border-strong: rgba(102, 170, 247, 0.50);

  --accent-irp-bg:     rgba(183, 177, 248, 0.14); /* lilac on dark */
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] {
  font-family: var(--font-arabic);
  direction: rtl;
}

body { margin: 0; min-height: 100vh; background: var(--surface-bg); color: var(--text-primary); }

::selection { background: var(--sol-primary-200); color: var(--sol-primary-900); }
[data-theme="dark"] ::selection { background: var(--sol-primary-700); color: #fff; }

/* ============================================================
   SEMANTIC TYPE ROLES
   Use these instead of raw tokens when writing prose-like layouts.
   ============================================================ */
.display, h1.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text-primary);
}
p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-primary);
  margin: 0;
}
.body-sm, small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-tertiary);
}
.eyebrow, .section-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
}
a {
  color: var(--sol-primary-500);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--sol-primary-700); text-decoration: underline; }

/* RTL helpers */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.3; }
html[lang="ar"] p, html[lang="ar"] .body, html[lang="ar"] .body-lg { line-height: 1.75; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 999px; border: 2px solid var(--surface-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }