/* DocLedger — design tokens (from Professional Design System).
   Load BEFORE bootstrap-overrides.css.
   --brand is overridden per hospital by BrandStyles view component. */

:root {
  /* ---- surfaces & ink ---- */
  --color-bg:        #f3f2f2;
  --color-surface:   #eae9e9;
  --color-text:      #201e1d;
  --color-text-2:    #444141;
  --color-text-3:    #605d5d;
  --color-muted:     #7d7979;
  --color-muted-2:   #9b9797;

  /* ---- per-hospital brand (injected from SiteSettings) ---- */
  --brand:      #0f6fb8;
  --brand-rgb:  15, 111, 184;
  --brand-ink:  #ffffff;
  --brand-050:  color-mix(in srgb, var(--brand) 8%, #fff);
  --color-primary: var(--brand);

  /* ---- accents (follow brand) ---- */
  --color-accent:    var(--brand);  /* interaction: buttons, links, active nav */
  --color-accent-2:  #d6006c;       /* alerts, debt, errors only */

  /* ---- blue family (six roles; fixed reference blues) ---- */
  --blue-navy:   #14314f;
  --blue-royal:  #2a5fbf;
  --blue-petrol: #106b78;
  --blue-steel:  #5a7f96;
  --blue-ice:    #cbeeff;

  /* ---- semantic ---- */
  --state-info:        var(--brand);
  --state-success:     #0e8f6f;
  --state-warning:     #b8730b;
  --state-danger:      #d6006c;
  --state-disabled:    #7d7979;

  /* ---- tonal ramps 100 → 900 ---- */
  --neutral-100:#f8f4f4; --neutral-200:#eae7e7; --neutral-300:#d7d3d3;
  --neutral-400:#bab6b6; --neutral-500:#9b9797; --neutral-600:#7d7979;
  --neutral-700:#605d5d; --neutral-800:#444141; --neutral-900:#2d2b2b;

  --accent-100: color-mix(in srgb, var(--brand) 10%, #fff);
  --accent-200: color-mix(in srgb, var(--brand) 20%, #fff);
  --accent-300: color-mix(in srgb, var(--brand) 36%, #fff);
  --accent-400: color-mix(in srgb, var(--brand) 55%, #fff);
  --accent-500: color-mix(in srgb, var(--brand) 78%, #fff);
  --accent-600: color-mix(in srgb, var(--brand) 82%, #000);
  --accent-700: color-mix(in srgb, var(--brand) 68%, #000);
  --accent-800: color-mix(in srgb, var(--brand) 52%, #000);
  --accent-900: color-mix(in srgb, var(--brand) 32%, #000);

  --royal-100:#eef3fd; --royal-200:#dbe6fa; --royal-300:#b8ccf3;
  --royal-400:#8dabe8; --royal-500:#5b85d8; --royal-600:#2a5fbf;
  --royal-700:#1f4794; --royal-800:#183566; --royal-900:#14314f;

  --petrol-100:#e8f5f4; --petrol-200:#cbe9e7; --petrol-300:#a2d5d1;
  --petrol-400:#6ebab5; --petrol-500:#3a9a97; --petrol-600:#106b78;
  --petrol-700:#0d5460; --petrol-800:#0b3e47; --petrol-900:#0a2a30;

  --magenta-100:#fff1f4; --magenta-200:#ffdee6; --magenta-300:#ffc0d0;
  --magenta-400:#ff90b1; --magenta-500:#ff458e; --magenta-600:#d82071;
  --magenta-700:#aa0b56; --magenta-800:#790e3d; --magenta-900:#4b1528;

  /* ---- Bootstrap bridge ---- */
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--accent-700);
  --bs-link-hover-color: var(--color-accent);
  --bs-focus-ring-color: color-mix(in srgb, var(--brand) 25%, transparent);

  /* ---- type (match wwwroot/fonts family names) ---- */
  --font-heading: "DarbarehFaNumWeb", "Darbareh", sans-serif;
  --font-body:    "IRANYekanXFaNum", "IRANYekanX", system-ui, sans-serif;
  --leading-body: 1.9;
  --leading-head: 1.15;

  /* ---- spacing (5px scale) ---- */
  --space-1: 5px;  --space-2: 10px; --space-3: 15px;
  --space-4: 20px; --space-6: 30px; --space-8: 40px;
  --space-11: 56px; --space-13: 64px;

  /* ---- radii ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-2xl: 34px;
  --radius-phone: 40px;

  /* ---- elevation & glass ---- */
  --shadow-panel:  0 22px 48px -30px rgba(10,48,62,.42), inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-accent: 0 14px 28px -16px color-mix(in srgb, var(--brand) 65%, transparent);
  --glass-fill:    linear-gradient(168deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  --glass-border:  1px solid rgba(255,255,255,.60);
  --glass-blur:    blur(22px) saturate(150%);

  /* ---- page background (brand tint + fixed magenta accent) ---- */
  --page-bg:
    radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    radial-gradient(900px 520px at 4% 12%, rgba(214,0,108,.09), transparent 62%),
    linear-gradient(168deg, #f6f5f5 0%, #ececeb 55%, #e6e7e8 100%);
}

html { direction: rtl; }

body {
  margin: 0;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}