/* Al Hayat design tokens: the single source for colour, type, spacing, shape and motion
   (master plan section 2). Three themes, chosen by an attribute on <html>:
     :root                    Oasis      public site, samples, legal, 404
     [data-theme="lounge"]    Lounge     client portal, sign-in, invitations, celebrations
     [data-theme="workspace"] Workspace  staff, supervisor, admin, employer dashboard
   Components (components.css) are written against the SEMANTIC tokens (--c-*), so they render
   correctly in every theme. scripts/build-tokens.mjs mirrors these values into
   src/email/tokens.js; tests/design-tokens.test.mjs keeps both in step and checks contrast. */
/* Self-hosted, Latin subset (SIL Open Font License): no third-party font requests. Arabic and Bengali
   faces load only on those languages (fonts-ar.css, fonts-bn.css). Preloaded from the page head. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
  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: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  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; }

:root {
  /* ---- Oasis palette (section 2.2) ---- */
  --canvas: #F7F5F0;          /* page background */
  --surface: #FFFFFF;         /* cards, forms, menus */
  --surface-2: #FBFAF7;       /* alternate band, table header */
  --border: #E7E1D4;          /* hairlines (decorative) */
  --border-strong: #8795A6;   /* input borders, focus outlines: 3.05:1 on white */
  --heading: #102A43;         /* navy: headings, logo text, dark bands */
  --navy-deep: #0B1F33;       /* hero veils, footer */
  --body: #2B3440;
  --muted: #5B6675;           /* secondary text, 14px and up */
  --teal: #0E7C7B;            /* links, trust ticks, secondary buttons, focus ring */
  --teal-ink: #0B5F5E;        /* text on the teal tint */
  --teal-tint: #E3F2F1;
  --saffron: #F2B544;         /* THE one primary action per screen, always with navy text */
  --saffron-hover: #E9A62E;
  --gold: #C9A96E;            /* logo and signature hairlines only; never text on light */
  --brand-gold: #C9A96E;
  --on-dark: #FFFFFF;

  /* Journeys: text uses the -ink variant, large areas the tint, never a button fill */
  --j-umrah: #1F7A55;         --j-umrah-tint: #E5F2EC;
  --j-travel: #D9664A;        --j-travel-ink: #A8442C;   --j-travel-tint: #FBECE6;
  --j-study: #2F6FDE;         --j-study-ink: #2459C7;    --j-study-tint: #E8EFFC;
  --j-business: #5B4BB7;      --j-business-tint: #EEEBFA;

  /* Signals (no red anywhere, per owner) */
  --attention-ink: #8A5A00;   --attention-tint: #FDF1D8;
  --problem-ink: #A8442C;     --problem-tint: #FBECE6;   --problem-line: #E3B3A5;
  --ok-ink: #1B6B4A;          --ok-tint: #E5F2EC;

  /* ---- Legacy names, mapped onto Oasis so every existing sheet repaints without edits ---- */
  --navy: var(--heading);
  --paper: var(--canvas);
  --ink: var(--body);
  --ink-2: var(--muted);
  --ink-3: var(--muted);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --white: #FFFFFF;
  --blue: var(--teal);
  --blue-hover: var(--teal-ink);
  --blue-soft: #A8DCDB;       /* light teal on dark bands */
  --sky: var(--teal-tint);
  --sky-deep: #EFEBE2;
  --ok: var(--ok-ink);
  --warn: var(--attention-ink);
  --bad: var(--problem-ink);

  /* ---- Semantic tokens: what components use ---- */
  --c-bg: var(--canvas);
  --c-surface: var(--surface);
  --c-text: var(--body);
  --c-heading: var(--heading);
  --c-muted: var(--muted);
  --c-link: var(--teal);
  --c-focus: var(--teal);
  --c-line: var(--border);
  --c-line-strong: var(--border-strong);
  --c-action-bg: var(--saffron);
  --c-action-bg-hover: var(--saffron-hover);
  --c-action-ink: var(--heading);
  --c-secondary-line: var(--teal);
  --c-secondary-ink: var(--teal);
  --c-problem-ink: var(--problem-ink);
  --c-problem-tint: var(--problem-tint);
  --c-ok-ink: var(--ok-ink);
  --c-ok-tint: var(--ok-tint);
  --c-wait-ink: var(--attention-ink);
  --c-wait-tint: var(--attention-tint);
  --c-info-ink: #2459C7;
  --c-info-tint: #E8EFFC;

  /* Stage chips (section 2.5): text on tint, all at least 5.4:1 */
  --st-received-ink: #3A4757;  --st-received-tint: #EEF1F5;
  --st-working-ink: #2459C7;   --st-working-tint: #E8EFFC;
  --st-approval-ink: #5B4BB7;  --st-approval-tint: #EEEBFA;
  --st-waiting-ink: #8A5A00;   --st-waiting-tint: #FDF1D8;
  --st-ready-ink: #0B5F5E;     --st-ready-tint: #E3F2F1;
  --st-confirmed-ink: #1B6B4A; --st-confirmed-tint: #E5F2EC;
  --st-done-ink: #1B6B4A;      --st-done-tint: #E5F2EC;
  --st-closed-ink: #5F6B7A;    --st-closed-tint: #F4F6F8;

  /* ---- Type (section 2.6) ---- */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar-ui: "Noto Kufi Arabic", "Source Sans 3", system-ui, sans-serif;
  --font-ar-text: "Noto Naskh Arabic", "Source Sans 3", system-ui, sans-serif;
  --font-bn: "Noto Sans Bengali", "Source Sans 3", system-ui, sans-serif;
  --text: 17px;
  --lead: 20px;
  --t-display: clamp(44px, 3vw + 32px, 76px);
  --t-h1: clamp(34px, 1.6vw + 28px, 52px);
  --t-h2: clamp(26px, 1.1vw + 22px, 38px);
  --t-h3: clamp(20px, .4vw + 18px, 24px);
  --t-lead: clamp(18px, .3vw + 17px, 21px);
  --t-body: 17px;
  --t-small: 14px;
  --t-eyebrow: 13px;
  --t-price: clamp(32px, 1.2vw + 28px, 44px);

  /* ---- Spacing: 4/8/12/16/24/32/48/64/96/128 ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ---- Shape and depth ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 42, 67, .06), 0 1px 1px rgba(16, 42, 67, .04);
  --sh-2: 0 12px 28px -14px rgba(16, 42, 67, .28);
  --sh-3: 0 30px 60px -24px rgba(11, 31, 51, .45);
  --shadow: var(--sh-2);
  --max: 1200px;

  /* ---- Motion (section 2.8) ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-1: 120ms; --d-2: 220ms; --d-3: 420ms; --d-4: 900ms;
}

/* ===== Lounge: the private client portal (section 2.3). Navy and gold, dark. ===== */
[data-theme="lounge"] {
  --lx-bg: #0B1F33;
  --lx-bg-2: #102A43;
  --lx-glass: rgba(17, 44, 70, .62);
  --lx-text: #F5F2EA;
  --lx-muted: rgba(236, 240, 245, .74);
  --lx-faint: rgba(236, 240, 245, .60);
  --lx-line: rgba(255, 255, 255, .12);
  --lx-line-gold: rgba(201, 169, 110, .38);
  --lx-gold: #C9A96E;         /* primary action fill, navy text: 7.46:1 */
  --lx-gold-2: #E2CC9C;       /* hover fill */
  --lx-link: #E2C98F;
  --lx-ok: #9ED9B8;           --lx-ok-tint: rgba(31, 122, 85, .18);
  --lx-wait: #F4CF7A;         --lx-wait-tint: rgba(242, 181, 68, .16);
  --lx-problem: #F5B7A5;      --lx-problem-tint: rgba(217, 102, 74, .18);
  --lx-info: #A9C4F5;         --lx-info-tint: rgba(47, 111, 222, .18);
  --lx-j-umrah: #6FC79D; --lx-j-travel: #F0937B; --lx-j-study: #8DB2F5; --lx-j-business: #B3A8EE;
  --lx-shadow: 0 24px 60px -28px rgba(0, 0, 0, .7);

  --c-bg: var(--lx-bg);
  --c-surface: var(--lx-bg-2);
  --c-text: var(--lx-text);
  --c-heading: var(--lx-text);
  --c-muted: var(--lx-muted);
  --c-link: var(--lx-link);
  --c-focus: var(--lx-link);
  --c-line: var(--lx-line);
  --c-line-strong: var(--lx-line-gold);
  --c-action-bg: var(--lx-gold);
  --c-action-bg-hover: var(--lx-gold-2);
  --c-action-ink: var(--lx-bg);
  --c-secondary-line: rgba(201, 169, 110, .55);
  --c-secondary-ink: #F5EFE2;
  --c-problem-ink: var(--lx-problem);
  --c-problem-tint: var(--lx-problem-tint);
  --c-ok-ink: var(--lx-ok);
  --c-ok-tint: var(--lx-ok-tint);
  --c-wait-ink: var(--lx-wait);
  --c-wait-tint: var(--lx-wait-tint);
  --c-info-ink: var(--lx-info);
  --c-info-tint: var(--lx-info-tint);

  /* Old sheets still say blue/paper/ink: inside the portal they become teal on navy, never electric blue. */
  --blue: #0E7C7B;
  --blue-hover: #0B6E6D;
  --st-received-ink: var(--lx-muted);   --st-received-tint: rgba(255, 255, 255, .08);
  --st-working-ink: var(--lx-info);     --st-working-tint: var(--lx-info-tint);
  --st-approval-ink: #C9C1F2;           --st-approval-tint: rgba(91, 75, 183, .22);
  --st-waiting-ink: var(--lx-wait);     --st-waiting-tint: var(--lx-wait-tint);
  --st-ready-ink: #E2CC9C;              --st-ready-tint: rgba(201, 169, 110, .14);
  --st-confirmed-ink: var(--lx-ok);     --st-confirmed-tint: var(--lx-ok-tint);
  --st-done-ink: var(--lx-ok);          --st-done-tint: var(--lx-ok-tint);
  --st-closed-ink: var(--lx-faint);     --st-closed-tint: rgba(255, 255, 255, .05);
}

/* Low-end devices: glass becomes solid (pwa.js sets the class from deviceMemory, Save-Data, slow networks). */
.lx-solid { --lx-glass: #102A43; }
.lx-solid * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) {
  [data-theme="lounge"] { --lx-glass: #102A43; }
  [data-theme="lounge"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ===== Workspace: staff, supervisor, admin (section 2.4). Calm, dense, light. ===== */
[data-theme="workspace"] {
  --ws-bg: #F4F6F8;
  --ws-surface: #FFFFFF;
  --ws-surface-2: #F9FAFB;
  --ws-border: #DDE2E8;
  --ws-border-strong: #8795A6;
  --ws-ink: #14202E;
  --ws-ink-2: #4A5868;
  --ws-ink-3: #5F6B7A;
  --ws-rail: #0F2236;
  --ws-rail-ink: #D5DEE8;
  --ws-rail-active: #1C3550;
  --ws-rail-muted: #9FB0C3;
  --ws-rail-marker: #C9A96E;
  --ws-accent: #0B6E6D;
  --ws-primary: #102A43;
  --ws-decisive: #F2B544;
  --ws-danger-ink: #A8442C;
  --ws-danger-tint: #FBECE6;

  --c-bg: var(--ws-bg);
  --c-surface: var(--ws-surface);
  --c-text: var(--ws-ink);
  --c-heading: var(--ws-ink);
  --c-muted: var(--ws-ink-2);
  --c-link: var(--ws-accent);
  --c-focus: var(--ws-accent);
  --c-line: var(--ws-border);
  --c-line-strong: var(--ws-border-strong);
  --c-action-bg: var(--ws-primary);
  --c-action-bg-hover: #163956;
  --c-action-ink: #FFFFFF;
  --c-secondary-line: var(--ws-border-strong);
  --c-secondary-ink: var(--ws-ink);
  --c-problem-ink: var(--ws-danger-ink);
  --c-problem-tint: var(--ws-danger-tint);
  --blue: var(--ws-accent);
  --blue-hover: #095857;
}