/* وصلها 4 — design tokens («ضوء المكتب»). Every page and component reads these
   variables; no raw colour values elsewhere. Contrast measured in
   docs/design/wasalha-4-design.md (text ≥ 4.5:1, controls ≥ 3:1). */

@font-face { font-family: 'Plex Arabic'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/IBMPlexSansArabic-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/IBMPlexSansArabic-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Cairo Display'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/assets/Cairo-arabic-v31.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Cairo Display'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/assets/Cairo-latin-v31.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }

:root {
  color-scheme: dark;
  --bg: #0C0D10;
  --surface-1: #15171B;
  --surface-2: #1C1F24;
  --surface-3: #25292F;
  --paper: #1A1C20;
  --line: #2B2F35;
  --line-strong: #3D424A;
  --control: #6E737B;
  --text: #F3EFE7;
  --text-2: #C2BCB1;
  --text-3: #9A958B;
  --accent: #E8C27A;
  --accent-strong: #F3D59D;
  --on-accent: #1F1708;
  --accent-soft: rgb(232 194 122 / .12);
  --accent-line: rgb(232 194 122 / .38);
  --success: #86D6A6;
  --success-soft: rgb(134 214 166 / .12);
  --danger: #F28B7D;
  --danger-soft: rgb(242 139 125 / .12);
  --warning: #EDBB63;
  --info: #7CC3E8;
  --info-soft: rgb(124 195 232 / .12);
  --scrim: rgb(5 6 8 / .62);
  --glow: radial-gradient(1100px 620px at 100% -10%, rgb(232 194 122 / .085), transparent 62%),
          radial-gradient(700px 500px at 0% 110%, rgb(124 195 232 / .035), transparent 60%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow-pop: 0 24px 64px rgb(0 0 0 / .5), 0 2px 8px rgb(0 0 0 / .35);

  /* Subject ribbons (accent, icon and progress only — never the sole carrier of meaning). */
  --subject-calculus: #E9A653;
  --subject-physics: #72AAEA;
  --subject-logic: #E08DB4;
  --subject-computing: #5CC7B2;
  --subject-writing: #CDB78E;
  --subject-precalculus: #9FCE72;
  --subject-default: var(--accent);

  --font-body: 'Plex Arabic', 'Noto Sans Arabic', Tahoma, sans-serif;
  --font-display: 'Cairo Display', 'Plex Arabic', Tahoma, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  /* Type: seven sizes and one display size. Nothing else is used. */
  --text-xs: .8125rem;   /* 13 — badges, meta, captions (the minimum) */
  --text-sm: .875rem;    /* 14 — secondary text, labels, helper text */
  --text-md: 1rem;       /* 16 — interface text: buttons, inputs, list titles */
  --text-body: 1.0625rem;/* 17 — reading text */
  --text-lg: 1.125rem;   /* 18 — card titles (h3) */
  --text-xl: 1.375rem;   /* 22 — section titles (h2), stat numbers */
  --text-2xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);   /* 28–36 — page title (h1) */
  --text-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); /* 36–56 — hero statement, subject name, score */
  --leading-tight: 1.35;  /* headings, numbers */
  --leading-ui: 1.5;      /* controls, rows, captions */
  --leading-body: 1.8;    /* Arabic reading text */

  /* Space: a 4 px scale, and three roles that pages use instead of picking values. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --page-gap: var(--space-6);   /* between sections of a page (48 on desktop) */
  --card-pad: var(--space-4);   /* inside cards and panels (24 from tablet) */
  --stack: var(--space-3);      /* between pieces inside a card */
  --radius-control: 6px;
  --radius-card: 10px;
  --radius-sheet: 16px;
  --radius-pill: 999px;
  --control-height: 44px;       /* buttons, inputs, tabs, rows */
  --control-sm: 36px;           /* small buttons, chips, tags with actions */
  --rail-width: 248px;
  --rail-compact: 84px;
  --content-max: 1120px;
  --topbar-height: 64px;
  --tabbar-height: 64px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --fast: 160ms;
  --enter: 240ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F1E8;
  --surface-1: #FFFDF8;
  --surface-2: #EEE8DC;
  --surface-3: #FFFFFF;
  --paper: #FFFDF8;
  --line: #E2DACB;
  --line-strong: #CFC5B4;
  --control: #857C6D;
  --text: #1C1A15;
  --text-2: #4D483F;
  --text-3: #6A655B;
  --accent: #8A5C0E;
  --accent-strong: #714A0A;
  --on-accent: #FFF8EA;
  --accent-soft: rgb(138 92 14 / .1);
  --accent-line: rgb(138 92 14 / .35);
  --success: #23764A;
  --success-soft: rgb(35 118 74 / .1);
  --danger: #A8372A;
  --danger-soft: rgb(168 55 42 / .09);
  --warning: #8A5A00;
  --info: #1F628F;
  --info-soft: rgb(31 98 143 / .09);
  --scrim: rgb(28 26 21 / .45);
  --glow: radial-gradient(1100px 620px at 100% -10%, rgb(138 92 14 / .07), transparent 62%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow-pop: 0 24px 60px rgb(60 45 20 / .18), 0 2px 8px rgb(60 45 20 / .12);
  --subject-calculus: #9A5B10;
  --subject-physics: #25609F;
  --subject-logic: #A23F70;
  --subject-computing: #16766A;
  --subject-writing: #7A6230;
  --subject-precalculus: #4B7A1F;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #F5F1E8; --surface-1: #FFFDF8; --surface-2: #EEE8DC; --surface-3: #FFFFFF; --paper: #FFFDF8;
    --line: #E2DACB; --line-strong: #CFC5B4; --control: #857C6D;
    --text: #1C1A15; --text-2: #4D483F; --text-3: #6A655B;
    --accent: #8A5C0E; --accent-strong: #714A0A; --on-accent: #FFF8EA; --accent-soft: rgb(138 92 14 / .1); --accent-line: rgb(138 92 14 / .35);
    --success: #23764A; --success-soft: rgb(35 118 74 / .1); --danger: #A8372A; --danger-soft: rgb(168 55 42 / .09);
    --warning: #8A5A00; --info: #1F628F; --info-soft: rgb(31 98 143 / .09); --scrim: rgb(28 26 21 / .45);
    --glow: radial-gradient(1100px 620px at 100% -10%, rgb(138 92 14 / .07), transparent 62%);
    --shadow-pop: 0 24px 60px rgb(60 45 20 / .18), 0 2px 8px rgb(60 45 20 / .12);
    --subject-calculus: #9A5B10; --subject-physics: #25609F; --subject-logic: #A23F70;
    --subject-computing: #16766A; --subject-writing: #7A6230; --subject-precalculus: #4B7A1F;
  }
}

/* The space roles grow with the screen; pages never pick their own values. */
@media (min-width: 768px) { :root { --card-pad: var(--space-5); } }
@media (min-width: 1024px) { :root { --page-gap: var(--space-7); } }