/* ==========================================================================
   Baseera design tokens (functional names). Single source for color, type, space, radius,
   shadow, motion and the layout grid. The site is night-only, so these are the night values.
   Guide: DESIGN_SYSTEM.md. Naming: Color/Primary/500 -> --color-primary-500, and so on.
   ========================================================================== */
:root {
  /* ---- Color / Primary (slate-blue ramp from the Baseera palette) ---- */
  --color-primary-100: #E6EDF5;
  --color-primary-300: #B4C0D0;
  --color-primary-400: #8FA0BA;
  --color-primary-500: #5F6F92;   /* brand fill: buttons, active states (white text 5.0:1) */
  --color-primary-600: #4A5A82;   /* Color/Primary/Hover (white text 6.8:1) */
  --color-primary-700: #37406E;   /* pressed, icon tiles (white text 9.9:1) */
  --color-primary-900: #1A1A4A;
  /* ---- Color / Secondary (steel) ---- */
  --color-secondary-500: #8FA0BA;
  --color-secondary-300: #B4C0D0;
  /* ---- Color / Neutral: surfaces, text, borders ---- */
  --color-surface-main: #0C0726;          /* page */
  --color-surface-deep: #05030F;          /* sidebar, wells */
  --color-surface-card: #161230;          /* card (solid equivalent of the glass card) */
  --color-surface-raised: #1A1A4A;        /* popovers, selected rows */
  --color-text-primary: #E6EDF5;          /* 16.6:1 on surface-main */
  --color-text-secondary: #9AA8BC;        /* 8.1:1 */
  --color-text-muted: #7D8EA8;            /* 5.9:1, captions only */
  --color-text-disabled: #5F6F92;         /* 3.9:1, disabled only */
  --color-text-on-primary: #FFFFFF;
  --color-border: #2A2D5A;                /* hairlines and dividers */
  --color-border-strong: #4A5A82;         /* inputs, focus-adjacent */
  --color-overlay: rgba(0, 0, 1, .6);     /* modal scrim */
  /* ---- Color / System (status, tuned for dark surfaces) ---- */
  --color-success: #34D399;               /* 10.2:1 */
  --color-warning: #FBBF24;               /* 11.7:1 */
  --color-error:   #FB7185;               /* 7.3:1 */
  --color-info:    #7DD3FC;               /* 11.7:1 */
  --color-success-bg: rgba(52, 211, 153, .12);
  --color-warning-bg: rgba(251, 191, 36, .12);
  --color-error-bg:   rgba(251, 113, 133, .12);
  --color-info-bg:    rgba(125, 211, 252, .12);

  /* ---- Typography: Tajawal (Arabic + Latin). Sizes in px, line-height in px ---- */
  --font-family: 'Tajawal', system-ui, sans-serif;
  --fs-display: 56px;  --lh-display: 64px;   /* landing hero only, weight 300-500 */
  --fs-h1: 32px;       --lh-h1: 40px;        /* weight 700 */
  --fs-h2: 24px;       --lh-h2: 32px;        /* weight 700 */
  --fs-h3: 20px;       --lh-h3: 28px;        /* weight 700 */
  --fs-h4: 16px;       --lh-h4: 24px;        /* weight 700 */
  --fs-body-lg: 16px;  --lh-body-lg: 28px;   /* weight 400 / 500 */
  --fs-body-md: 14px;  --lh-body-md: 24px;   /* weight 400 / 500 */
  --fs-body-sm: 13px;  --lh-body-sm: 20px;   /* weight 400 */
  --fs-caption: 12px;  --lh-caption: 16px;   /* weight 400 / 700, never smaller */

  /* ---- Spacing: 4pt grid, 8pt rhythm. Allowed: 4 8 12 16 24 32 48 64 ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* ---- Radius ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px;

  /* ---- Shadow (dark UI: depth from darkness + a hairline, not from glow) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 1, .5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 1, .65);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 1, .85);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px var(--color-surface-main), 0 0 0 4px var(--color-primary-300);

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Layout grid: Mobile 4 columns / gutter 16 / margin 16 ---- */
  --grid-cols: 4; --grid-gutter: 16px; --grid-margin: 16px; --grid-max: 1200px;
}
/* Tablet >= 640px: 8 columns / gutter 16 / margin 24 */
@media (min-width: 640px) { :root { --grid-cols: 8; --grid-gutter: 16px; --grid-margin: 24px; } }
/* Desktop >= 1024px: 12 columns / gutter 24 / margin 32 (content max 1200) */
@media (min-width: 1024px) { :root { --grid-cols: 12; --grid-gutter: 24px; --grid-margin: 32px; } }

.bs-container { width: min(var(--grid-max) + 2 * var(--grid-margin), 100%); padding-inline: var(--grid-margin); margin-inline: auto; box-sizing: border-box; }
.bs-grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--grid-gutter); }
.bs-col-1 { grid-column: span 1; }
.bs-col-2 { grid-column: span 2; }
.bs-col-3 { grid-column: span 3; }
.bs-col-4 { grid-column: span 4; }
.bs-col-5 { grid-column: span 5; }
.bs-col-6 { grid-column: span 6; }
.bs-col-7 { grid-column: span 7; }
.bs-col-8 { grid-column: span 8; }
.bs-col-9 { grid-column: span 9; }
.bs-col-10 { grid-column: span 10; }
.bs-col-11 { grid-column: span 11; }
.bs-col-12 { grid-column: span 12; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .bs-col-1 { grid-column: span 1; }
  .bs-col-2 { grid-column: span 1; }
  .bs-col-3 { grid-column: span 2; }
  .bs-col-4 { grid-column: span 3; }
  .bs-col-5 { grid-column: span 3; }
  .bs-col-6 { grid-column: span 4; }
  .bs-col-7 { grid-column: span 5; }
  .bs-col-8 { grid-column: span 5; }
  .bs-col-9 { grid-column: span 6; }
  .bs-col-10 { grid-column: span 7; }
  .bs-col-11 { grid-column: span 7; }
  .bs-col-12 { grid-column: span 8; }
}
@media (max-width: 639.98px) {
  .bs-col-1 { grid-column: span 2; }
  .bs-col-2 { grid-column: span 2; }
  .bs-col-3 { grid-column: span 2; }
  .bs-col-4 { grid-column: span 4; }
  .bs-col-5 { grid-column: span 4; }
  .bs-col-6 { grid-column: span 4; }
  .bs-col-7 { grid-column: span 4; }
  .bs-col-8 { grid-column: span 4; }
  .bs-col-9 { grid-column: span 4; }
  .bs-col-10 { grid-column: span 4; }
  .bs-col-11 { grid-column: span 4; }
  .bs-col-12 { grid-column: span 4; }
}
.bs-stack { display: grid; gap: var(--grid-gutter); }


/* ==========================================================================
   Day mode: the same functional tokens with light values (see DESIGN_SYSTEM.md)
   Measured contrast on the card surface (#FFFFFF): text-primary 19.6:1, secondary 9.9:1, muted 6.8:1,
   primary-500 5.0:1, success 5.5:1, warning 5.0:1, error 6.3:1, info 5.9:1, border-strong 3.7:1 (UI components need 3:1).
   On the page surface (#EEF2F8) the same colors are 0.5 lower (primary-500 and warning 4.5:1): use them on cards.
   ========================================================================== */
:root { --sel-ring: var(--color-primary-300); --scroll-thumb: rgba(180, 192, 208, .28); }
html:not(.dark) {
  --color-surface-main: #EEF2F8;
  --color-surface-deep: #E2E8F2;
  --color-surface-card: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text-primary: #0C0726;
  --color-text-secondary: #37406E;
  --color-text-muted: #4A5A82;
  --color-text-disabled: #8FA0BA;
  --color-border: #D5DCE8;
  --color-border-strong: #75869F;
  --color-overlay: rgba(12, 7, 38, .45);
  --color-success: #047857;  --color-success-bg: rgba(4, 120, 87, .10);
  --color-warning: #B45309;  --color-warning-bg: rgba(180, 83, 9, .10);
  --color-error:   #BE123C;  --color-error-bg:   rgba(190, 18, 60, .10);
  --color-info:    #0369A1;  --color-info-bg:    rgba(3, 105, 161, .10);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #37406E;
  --shadow-sm: 0 1px 2px rgba(12, 7, 38, .08);
  --shadow-md: 0 8px 24px -8px rgba(12, 7, 38, .18);
  --shadow-lg: 0 24px 60px -20px rgba(12, 7, 38, .28);
  --sel-ring: #37406E; --scroll-thumb: rgba(55, 64, 110, .3);
  color-scheme: light;
}
html.dark { color-scheme: dark; }