/*
 * Alsaliheen design tokens: "Titanium".
 * Cool metal neutrals with one signal blue. Flat colour only: no glows, no gradients, no shadows.
 * Every page loads this before site.css. Sections (apps) override only --section / --section-soft.
 * Guide: docs/brand/alsaliheen-design-system.md
 */

@font-face { font-family: "Readex Pro"; src: url("/fonts/readex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url("/fonts/readex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url("/fonts/readex-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; src: url("/fonts/readex-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; src: url("/fonts/plex_arabic_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/fonts/plex_arabic_bold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }

:root {
  /* Palette: raw values. Components use the roles below, never these directly. */
  --white-cool: #F4F5F6;
  --titanium: #DADDE1;
  --titanium-2: #E9EBED;
  --steel: #7D848D;
  --steel-text: #5F656E;   /* steel dark enough for body text on white (5.9:1) */
  --graphite: #16181B;
  --night: #0F1113;
  --signal: #1D3BFF;       /* the one accent: actions, links, focus */
  --signal-night: #7C8CFF; /* signal on dark backgrounds */

  /* Roles: light (default) */
  --bg: var(--white-cool);
  --surface: #FFFFFF;
  --surface-quiet: var(--titanium-2);
  --text: var(--graphite);
  --text-2: var(--steel-text);
  --line: var(--titanium);
  --link: var(--signal);
  --action-bg: var(--signal);
  --action-text: #FFFFFF;
  --action-2-bg: transparent;     /* secondary button: outline */
  --action-2-text: var(--graphite);
  --focus: var(--signal);

  /* Section accent: each app or section sets its own. Default is the signal blue. */
  --section: var(--signal);
  --section-soft: #E4E8FF;

  /* Type: Readex Pro for display (headings, wordmark), Plex Sans Arabic for everything else. */
  --font-display: "Readex Pro", "Plex Arabic", system-ui, sans-serif;
  --font-body: "Plex Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(2rem, 4.4vw, 2.75rem);
  --step-4: clamp(2.4rem, 5.6vw, 4rem);

  /* Shape and space: small radii, hairlines, no shadows. */
  --radius-s: 6px;    /* buttons, chips */
  --radius-m: 10px;   /* panels */
  --radius-l: 14px;   /* screenshots */
  --hairline: 1px solid var(--line);
  --space-section: clamp(64px, 10vw, 120px);
  --measure: 38em;

  color-scheme: light dark;
}

/* Sections */
.section-design { --section: var(--signal); --section-soft: #E4E8FF; }
.section-khushoo { --section: #1B6B58; --section-soft: #DDEDE6; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--night);
    --surface: #181B1E;
    --surface-quiet: #14171A;
    --text: #ECEEF0;
    --text-2: #9AA0A8;
    --line: #2A2E33;
    --link: var(--signal-night);
    --action-bg: #ECEEF0;
    --action-text: var(--night);
    --action-2-text: #ECEEF0;
    --focus: var(--signal-night);
    --section: var(--signal-night);
    --section-soft: #1B2040;
  }
  .section-khushoo { --section: #86D5BC; --section-soft: #16261F; }
}