/* Design tokens for the application. Load order (App.razor):
     ishraf-fonts.css → app-theme.css (tokens) → base.css → components.css → pages/*.css
     → Ishraf.UI.Controls controls.css → app.css (utilities; loaded last so they win ties).

   Breakpoints (custom properties can't be used in media queries, so keep to this set):
     480px small phone · 620px phone · 720px app shell · 860px tablet · 1100px narrow desktop */
:root {
  --bg: #F5F8FF; --surface: #FFFFFF; --surface-2: #F2F4F7; --sunken: #EDF3FF;
  --ink: #062A74; --muted: #667080; --faint: #8E99AD;
  --line: #CDD9EE; --line-soft: #E2E9F5;
  --brand: #034BE4; --brand-strong: #0639A5; --brand-tint: rgba(3,75,228,0.12); --brand-tint-2: rgba(3,75,228,0.06);
  --on-brand: #fff;
  --violet: #2958B8;
  --success: #087A58; --success-bg: rgba(61,210,157,0.18);
  --warning: #AD4C00; --warning-bg: rgba(255,151,5,0.22);
  --error: #C83200; --error-bg: rgba(255,80,5,0.12);
  --info: #034BE4; --info-bg: rgba(66,139,249,0.14);
  --disabled-bg: #E6EBF2; --disabled-fg: #647086; --disabled-border: #AEB8C7;

  --shadow-xs: 0 1px 3px rgba(6,42,116,.12);
  --shadow-raised: 0 3px 10px rgba(6,42,116,.06);
  --shadow-hover: 0 8px 20px rgba(6,42,116,.09);
  --shadow-float: 0 18px 50px rgba(6,42,116,.12);
  --shadow-lg: 0 2px 12px rgba(26,18,8,0.14), 0 1px 3px rgba(26,18,8,0.08);
  --radius: 4px;
  --button-radius: 2px;

  --fl-skeleton-base: #DCE5F2;
  --fl-skeleton-highlight: #FFFFFF;

  --lh-body: 1.5; --lh-compact: 1.25;
}

[data-theme="dark"] {
  --bg: #111318; --surface: #191C22; --surface-2: #23262C; --sunken: #0C0E12;
  --ink: #F5F7FA; --muted: #B9C0CB; --faint: #7D8796;
  --line: #373E49; --line-soft: #292F38;
  --brand: #6EA3FF; --brand-strong: #9BC0FF; --brand-tint: rgba(110,163,255,0.18); --brand-tint-2: rgba(110,163,255,0.09);
  --on-brand: #101318;
  --violet: #B6CDFF;
  --success: #3DD29D; --success-bg: rgba(61,210,157,0.17);
  --warning: #FFB84C; --warning-bg: rgba(255,151,5,0.17);
  --error: #FF6B37; --error-bg: rgba(255,80,5,0.17);
  --info: #7BB0FF; --info-bg: rgba(66,139,249,0.18);
  --disabled-bg: #2A2E36; --disabled-fg: #9AA4B2; --disabled-border: #4A515D;
  --shadow-lg: 0 2px 14px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.25);

  --fl-skeleton-base: #23262C;
  --fl-skeleton-highlight: #0C0E12;
}