/* ============================================================
   Saladin Design System — Foundation Tokens
   ------------------------------------------------------------
   Brand: Saladin (Vietnamese insurance distributor)
   Source: Saladin | Design System (Figma)
   ============================================================ */

/* ---- Webfont — local Noto Sans (uploaded by user) ----------- */
/* Resolves relative to whatever stylesheet imports this file.
   Cards in /preview load this via ../colors_and_type.css → fonts at ../fonts/.
   UI kits load via ../../colors_and_type.css → ../../fonts/.
   We declare each weight as a separate @font-face so the browser picks
   the matching cut rather than synthesizing. */

@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100;
  src: url("./fonts/NotoSans-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 100;
  src: url("./fonts/NotoSans-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 200;
  src: url("./fonts/NotoSans-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 300;
  src: url("./fonts/NotoSans-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400;
  src: url("./fonts/NotoSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 400;
  src: url("./fonts/NotoSans-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500;
  src: url("./fonts/NotoSans-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 500;
  src: url("./fonts/NotoSans-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 600;
  src: url("./fonts/NotoSans-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700;
  src: url("./fonts/NotoSans-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 700;
  src: url("./fonts/NotoSans-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 800;
  src: url("./fonts/NotoSans-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 900;
  src: url("./fonts/NotoSans-Black.ttf") format("truetype"); font-display: swap; }

/* Condensed cuts — used where the Figma calls for "Noto Sans Display" (tighter optical size).
   We map "Noto Sans Display" → Noto Sans SemiCondensed at heavy weights, since the
   uploaded set does not include a true Display optical cut. */
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 400;
  src: url("./fonts/NotoSans_SemiCondensed-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 500;
  src: url("./fonts/NotoSans_SemiCondensed-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 600;
  src: url("./fonts/NotoSans_SemiCondensed-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 700;
  src: url("./fonts/NotoSans_SemiCondensed-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 800;
  src: url("./fonts/NotoSans_SemiCondensed-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans Display"; font-style: normal; font-weight: 900;
  src: url("./fonts/NotoSans_SemiCondensed-Black.ttf") format("truetype"); font-display: swap; }

/* SF Pro Display — uploaded by user. Used widely in the Saladin Figma for iOS
   button labels, hero copy and dashboard numerals. We map it as the primary
   "Display" face for headings and CTAs; Noto Sans handles body. */
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 100;
  src: url("./fonts/SF-Pro-Display-Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 100;
  src: url("./fonts/SF-Pro-Display-ThinItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 200;
  src: url("./fonts/SF-Pro-Display-Ultralight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 200;
  src: url("./fonts/SF-Pro-Display-UltralightItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 300;
  src: url("./fonts/SF-Pro-Display-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 300;
  src: url("./fonts/SF-Pro-Display-LightItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 400;
  src: url("./fonts/SF-Pro-Display-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 400;
  src: url("./fonts/SF-Pro-Display-RegularItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 500;
  src: url("./fonts/SF-Pro-Display-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 500;
  src: url("./fonts/SF-Pro-Display-MediumItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 600;
  src: url("./fonts/SF-Pro-Display-Semibold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 600;
  src: url("./fonts/SF-Pro-Display-SemiboldItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 700;
  src: url("./fonts/SF-Pro-Display-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 700;
  src: url("./fonts/SF-Pro-Display-BoldItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 800;
  src: url("./fonts/SF-Pro-Display-Heavy.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 800;
  src: url("./fonts/SF-Pro-Display-HeavyItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 900;
  src: url("./fonts/SF-Pro-Display-Black.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 900;
  src: url("./fonts/SF-Pro-Display-BlackItalic.otf") format("opentype"); font-display: swap; }

@import url("https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css");

:root {
  /* ============================================================
     PRIMITIVE COLOURS — tonal scales (10 = darkest, 100 = white)
     ============================================================ */

  /* Primary — Emerald (Saladin Green) */
  --primary-10: #00210A;
  --primary-20: #003916;
  --primary-30: #005323;
  --primary-40: #006D31;
  --primary-50: #008A40;
  --primary-60: #00A74F;
  --primary-70: #14C560;   /* MAIN — the leaf */
  --primary-80: #44E178;
  --primary-90: #66FF92;
  --primary-95: #C5FFCA;
  --primary-99: #F6FFF2;
  --primary-100: #FFFFFF;

  /* Brand Navy (Saladin Blue) — the shield */
  --navy-10:  #0A1530;
  --navy-20:  #112147;
  --navy-30:  #182E62;
  --navy-40:  #1E3888;       /* MAIN — the shield */
  --navy-50:  #2A4DAE;
  --navy-60:  #4769C9;
  --navy-70:  #6A8AE0;
  --navy-80:  #94ADEC;
  --navy-90:  #C2D0F6;
  --navy-95:  #E1E8FB;
  --navy-99:  #F4F6FE;
  --navy-100: #FFFFFF;

  /* Secondary — Sage green */
  --secondary-10: #0E1F11;
  --secondary-20: #233425;
  --secondary-30: #394B3B;
  --secondary-40: #506351;
  --secondary-50: #697C69;
  --secondary-60: #829682;   /* MAIN */
  --secondary-70: #9CB19C;
  --secondary-80: #B7CCB6;
  --secondary-90: #DDE5DA;
  --secondary-95: #E1F6E0;
  --secondary-99: #F6FFF2;
  --secondary-100: #FFFFFF;

  /* Tertiary — Slate teal */
  --tertiary-10: #001F25;
  --tertiary-20: #00363E;
  --tertiary-30: #204D55;
  --tertiary-40: #39656D;
  --tertiary-50: #537E87;
  --tertiary-60: #6C98A1;    /* MAIN */
  --tertiary-70: #86B2BC;
  --tertiary-80: #A1CED8;
  --tertiary-90: #BDEAF4;
  --tertiary-95: #D3F7FF;
  --tertiary-99: #F7FDFF;
  --tertiary-100: #FFFFFF;

  /* Neutral — grey-green */
  --neutral-10:  #161D17;
  --neutral-20:  #2B322B;
  --neutral-30:  #414941;
  --neutral-40:  #596058;
  --neutral-50:  #727970;
  --neutral-60:  #8B9389;
  --neutral-70:  #A6ADA3;
  --neutral-80:  #C1C9BE;
  --neutral-90:  #DDE5DA;
  --neutral-95:  #EBF3E8;
  --neutral-99:  #F7FEF3;
  --neutral-100: #FFFFFF;

  /* Gray (alternative neutral, system) */
  --gray-10:  #1B1D20;
  --gray-20:  #373A40;
  --gray-30:  #5C5F5F;
  --gray-40:  #6B7280;
  --gray-50:  #919294;
  --gray-60:  #A6ADA3;
  --gray-70:  #C4C7C7;
  --gray-80:  #DCDFE3;
  --gray-90:  #EFF1F1;
  --gray-95:  #F2F4F7;
  --gray-99:  #FAFAFA;
  --gray-100: #FFFFFF;

  /* Destructive / Error */
  --error-10:  #410002;
  --error-20:  #690005;
  --error-30:  #93000A;
  --error-40:  #BA1A1A;     /* MAIN */
  --error-50:  #DE3730;
  --error-60:  #FF5449;
  --error-70:  #FF897D;
  --error-80:  #FFB4AB;
  --error-90:  #FFDAD6;
  --error-95:  #FFEDEA;
  --error-99:  #FFFBFF;
  --error-100: #FFFFFF;

  /* Warning — mustard */
  --warning-10:  #201C00;
  --warning-20:  #373100;
  --warning-30:  #504700;
  --warning-40:  #6A5F00;
  --warning-50:  #857800;
  --warning-60:  #A29200;
  --warning-70:  #BFAC00;
  --warning-80:  #DDC800;    /* MAIN */
  --warning-90:  #FCE40F;
  --warning-95:  #FFF2A6;
  --warning-99:  #FFFCF4;
  --warning-100: #FFFFFF;

  /* Success — lime (when distinct from primary green) */
  --success-10:  #0B2000;
  --success-20:  #173800;
  --success-30:  #255100;
  --success-40:  #336B00;
  --success-50:  #418700;
  --success-60:  #52A305;
  --success-70:  #6BBF2B;    /* MAIN */
  --success-80:  #86DC46;
  --success-90:  #A0F960;
  --success-95:  #CFFFA9;
  --success-99:  #F8FFEB;
  --success-100: #FFFFFF;

  /* ============================================================
     SEMANTIC COLOURS — light mode (default)
     ============================================================ */
  --bg: #FFFFFF;
  --bg-variant: #F8FAFA;
  --bg-alternative: var(--neutral-99);
  --bg-primary-action: var(--primary-70);
  --bg-primary-action-hover: var(--primary-60);
  --bg-primary-action-pressed: var(--primary-50);
  --bg-secondary-action: var(--primary-95);
  --bg-destructive-action: var(--error-40);
  --bg-destructive-action-hover: var(--error-30);
  --bg-error: var(--error-95);
  --bg-success: var(--primary-95);
  --bg-warning: var(--warning-95);
  --bg-active: var(--primary-95);
  --bg-container-lowest: var(--gray-99);
  --bg-container-low: var(--gray-95);
  --bg-container: var(--gray-90);
  --bg-container-high: var(--gray-80);
  --bg-container-highest: var(--gray-70);
  --bg-overlay-light: rgba(255,255,255,0.72);
  --bg-overlay-dark: rgba(0,0,0,0.48);

  --text-primary: var(--navy-40);
  --text-default: #1B1D20;
  --text-support: var(--gray-30);
  --text-information: var(--navy-40);
  --text-success: var(--primary-50);
  --text-error: var(--error-40);
  --text-warning: var(--warning-60);
  --text-warning-inverse: var(--warning-10);
  --text-on-primary: #FFFFFF;
  --text-on-secondary: var(--primary-40);
  --text-inverse: #FFFFFF;
  --text-disabled: var(--gray-50);
  --text-on-primary-disabled: rgba(255,255,255,0.6);

  --border-default: var(--gray-80);
  --border-strong: var(--gray-70);
  --border-primary: var(--primary-70);
  --border-error: var(--error-40);
  --border-on-bg: var(--secondary-90);

  /* Brand anchors — semantic shortcuts */
  --brand-green: var(--primary-70);
  --brand-navy:  var(--navy-40);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "SF Pro Display", "Noto Sans Display", "Noto Sans", system-ui, sans-serif;
  --font-ios: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale — desktop */
  --fs-display: 52px;       --lh-display: 80px;
  --fs-h1: 40px;            --lh-h1: 64px;
  --fs-h2: 32px;            --lh-h2: 40px;
  --fs-h3: 24px;            --lh-h3: 32px;
  --fs-h4: 20px;            --lh-h4: 28px;
  --fs-h5: 18px;            --lh-h5: 24px;
  --fs-body: 16px;          --lh-body: 24px;
  --fs-body-sm: 14px;       --lh-body-sm: 20px;
  --fs-caption: 12px;       --lh-caption: 16px;

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

  /* ============================================================
     SPACING — single root scale
     ============================================================ */
  --space-none: 0;
  --space-4xs: 2px;
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 36px;
  --space-3xl: 40px;
  --space-4xl: 64px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;     /* buttons */
  --radius-md: 6px;
  --radius-lg: 8px;     /* cards, inputs */
  --radius-xl: 16px;    /* modal sheets */
  --radius-round: 9999px;

  /* ============================================================
     BORDERS
     ============================================================ */
  --border-w-sm: 1px;
  --border-w-md: 2px;
  --border-w-lg: 4px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-xs: 0 1px 2px 0 rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px 0 rgba(16,24,40,0.06);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.04);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-drag: 0 4px 4px 0 rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);

  /* ============================================================
     MOTION
     ============================================================ */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --bg: #0E1F11;
  --bg-variant: #161D17;
  --bg-alternative: #2B322B;
  --bg-primary-action: var(--primary-80);
  --bg-secondary-action: var(--primary-20);
  --bg-destructive-action: var(--error-50);
  --bg-error: var(--error-20);

  --text-default: #F7FEF3;
  --text-primary: var(--navy-80);
  --text-support: var(--neutral-70);
  --text-on-primary: var(--primary-10);
  --text-inverse: #1B1D20;
  --text-disabled: var(--gray-30);

  --border-default: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.24);

  --bg-overlay-light: rgba(0,0,0,0.48);
  --bg-overlay-dark:  rgba(0,0,0,0.72);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — use as base for plain HTML
   ============================================================ */
html {
  font-family: var(--font-sans);
  color: var(--text-default);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-default);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }

p { margin: 0 0 var(--space-md) 0; }
small { font-size: var(--fs-caption); line-height: var(--lh-caption); }

a {
  color: var(--brand-green);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
a:hover { color: var(--primary-60); }
a:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
  border-radius: 2px;
}

code, kbd, samp {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--gray-95);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

button, input, textarea, select { font: inherit; color: inherit; }

/* Saladin brand classes */
.text-saladin-green { color: var(--brand-green); }
.text-saladin-navy  { color: var(--brand-navy); }
.bg-saladin-green   { background: var(--brand-green); color: #fff; }
.bg-saladin-navy    { background: var(--brand-navy);  color: #fff; }