/* Design tokens. Light theme is the default. A dark set is defined under [data-theme="dark"] and is ready
   but not switched on anywhere yet (a switch needs JavaScript or a build step; these wireframes use neither). */
@layer reset, tokens, base, layout, components, wf;

@font-face { font-family: "Readex Pro"; font-weight: 300; font-display: swap; src: url("../fonts/ReadexPro-Light.ttf") format("truetype"); }
@font-face { font-family: "Readex Pro"; font-weight: 400; font-display: swap; src: url("../fonts/ReadexPro-Regular.ttf") format("truetype"); }
@font-face { font-family: "Readex Pro"; font-weight: 600; font-display: swap; src: url("../fonts/ReadexPro-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Readex Pro"; font-weight: 700; font-display: swap; src: url("../fonts/ReadexPro-Bold.ttf") format("truetype"); }

@layer tokens {
  :root {
    /* Raneem brand */
    --navy: #1a4fa0;
    --teal: #0096bb;
    --cyan: #00b3d7;
    --amber: #f5a623;
    --burnt: #c2410c;

    /* Surfaces: neutrals lean toward the navy so nothing reads as flat grey */
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface-2: #f8fafd;
    --surface-3: #eef3fa;
    --line: #dde5f0;
    --line-strong: #c4d0e2;
    --text: #0f172a;
    --text-2: #2f3d55;
    --muted: #5a6a82;
    --faint: #5f6e85;

    /* Roles of colour */
    --primary: #1a4fa0;
    --primary-hover: #143f84;
    --primary-weak: #e7effb;
    --on-primary: #ffffff;
    --accent: #00a7cc;
    --accent-weak: #e0f5fa;
    --ok: #137538;
    --ok-weak: #e6f5ec;
    --warn: #a5560a;
    --warn-weak: #fdf1d6;
    --bad: #b42318;
    --bad-weak: #fdecea;
    --info: #1d4ed8;
    --info-weak: #e8eeff;
    --payer: #c2410c;
    --payer-weak: #fdeee4;

    --focus: #007f9c; /* 4.6:1 on white, 4.3:1 on the page: a ring that clears 3:1 everywhere */
    --line-input: #7d8ca5; /* field and switch edges: 3.4:1, so an empty field is still visibly a field */
    /* Shadows are tinted toward the brand navy, never pure black */
    --shadow-1: 0 1px 2px rgba(20, 52, 110, 0.06), 0 1px 1px rgba(20, 52, 110, 0.04);
    --shadow-2: 0 10px 28px rgba(20, 52, 110, 0.14), 0 2px 6px rgba(20, 52, 110, 0.07);
    --scrim: rgba(15, 23, 42, 0.45);

    /* Type */
    --font: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-lg: 1rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.625rem;
    --fs-3xl: 2rem;

    /* Space and shape */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sidebar-w: 264px;
    --topbar-h: 60px;
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #101a2e;
    --surface-2: #0e1729;
    --surface-3: #152238;
    --line: #22304d;
    --line-strong: #2d3f63;
    --text: #e6edf7;
    --text-2: #cbd6ea;
    --muted: #9fb0cf;
    --faint: #7f8db0;
    --primary: #5b9bff;
    --primary-hover: #82b2ff;
    --primary-weak: #14264a;
    --on-primary: #08111f;
    --accent: #33c8e8;
    --accent-weak: #0f2b38;
    --ok: #4ade80;
    --ok-weak: #0f2a1c;
    --warn: #fbbf24;
    --warn-weak: #33260a;
    --bad: #f87171;
    --bad-weak: #351414;
    --info: #8fb0ff;
    --info-weak: #14214a;
    --payer: #fb923c;
    --payer-weak: #36200e;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}