/*
 * OSSA tokens, MEDIX brand colours, OFF+BRAND structure.
 *
 * The palette is sampled from the official MEDIX lockup, the same values medix.sy uses:
 * deep #012637, teal #0bb3a1, slate #04384c, mint #72e3d6, aqua #baf7ef, mist #f4faf8.
 * Brand teal is 2.5:1 on mist, so on light surfaces the accent is teal-deep #07756a.
 *
 * Components never name a colour. They read the semantic tokens below, and a region
 * re-resolves them by declaring `.on-deep`, which is how the sidebar and the sign-in
 * panel share every component with the light workspace.
 *
 * Navy is not used. Type and the dark surfaces are neutral charcoal, so teal is the only
 * colour the interface carries; deep and slate stay defined as brand references only.
 *
 * No shadows, anywhere. Structure is carried by hairlines.
 */

@font-face {
  font-family: "Figtree";
  src: url("../assets/figtree-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Qomra Arabic";
  src: url("../assets/qomra-arabic-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Qomra Arabic";
  src: url("../assets/qomra-arabic-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand */
  --deep: #012637;
  --slate: #04384c;
  --teal: #0bb3a1;
  --teal-deep: #07756a;
  --mint: #72e3d6;
  --aqua: #baf7ef;
  --mist: #f4faf8;
  --white: #ffffff;

  /* Neutral darks, in place of navy: ink for type, charcoal for dark surfaces. */
  --ink: #1b1e1d;
  --charcoal: #161817;
  --charcoal-raised: #222524;

  /* The OSSA logo's own inks, from the designer's files (Logo And Animation/). The mark is
     read on its own, so it keeps its colours rather than borrowing the accent. */
  --logo-ring: #02a0af;
  --logo-ink: #4f4f51;

  /* Clinical states. Amber and red are not brand colours; they are signals, used only
     where something needs a decision. */
  --warn: #8a5a00;
  --warn-wash: #fff6e0;
  --danger: #b3261e;
  --danger-wash: #fdeceb;

  /* Semantic, light workspace */
  --canvas: var(--mist);
  --surface: var(--white);
  --surface-sunk: #e9f4f1;
  --type: var(--ink);
  --type-muted: #555b59;
  --type-faint: #838987;
  --hairline: rgba(27, 30, 29, 0.12);
  --hairline-strong: rgba(27, 30, 29, 0.24);
  --accent: var(--teal-deep);
  --accent-wash: #e3f7f3;
  --on-accent: var(--white);
  --focus: var(--teal-deep);

  /* The ledger, what the conversation captured */
  --ledger: #e6faf6;
  --ledger-rule: var(--teal);
  --trend-od: var(--teal-deep);
  --trend-os: var(--ink);
  --scrim: rgba(17, 19, 18, 0.42);

  /* Type, OFF+BRAND scale, app-sized */
  --font: "Figtree", "Qomra Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "Qomra Arabic", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --t-label: 11px;
  --t-small: 13px;
  --t-body: 15px;
  --t-title: 18px;
  --t-display: 34px;
  --t-hero: 46px;
  --track-label: 0.05em;

  /* Space and shape */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --radius-control: 10px;
  --radius-surface: 0;
  --sidebar: 264px;
  --rail: 320px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.on-deep {
  --canvas: var(--charcoal);
  --surface: var(--charcoal-raised);
  --surface-sunk: #1c1f1e;
  --type: var(--white);
  --type-muted: #b2b7b5;
  --type-faint: #878d8b;
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.24);
  --accent: var(--teal);
  --accent-wash: rgba(11, 179, 161, 0.14);
  --on-accent: var(--charcoal);
  --focus: var(--mint);
  --logo-ring: #1cc4d1;
  --logo-ink: var(--white);
  color: var(--type);
  background: var(--canvas);
}

/*
 * Dark, for a dim consulting room. Neutral charcoal rather than navy: the canvas is near-black,
 * brand teal becomes the accent because it passes on dark, and amber and red are lifted so
 * they stay legible. Applied by choice (data-theme="dark") or by the computer's setting
 * when the clinician left it on "match this computer".
 */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

:root[data-theme="dark"] {
  --canvas: #121413;
  --surface: #1c1f1e;
  --surface-sunk: #242827;
  --type: #ecefee;
  --type-muted: #b2b7b5;
  --type-faint: #878d8b;
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --accent: var(--teal);
  --accent-wash: rgba(11, 179, 161, 0.14);
  --on-accent: var(--charcoal);
  --focus: var(--mint);
  --ledger: rgba(11, 179, 161, 0.10);
  --warn: #f2b84b;
  --warn-wash: rgba(242, 184, 75, 0.12);
  --danger: #ff8a80;
  --danger-wash: rgba(255, 138, 128, 0.12);
  --trend-od: var(--teal);
  --trend-os: var(--aqua);
  --scrim: rgba(0, 0, 0, 0.6);
  --logo-ring: #1cc4d1;
  --logo-ink: var(--white);
}
:root[data-theme="dark"] .on-deep { --canvas: #0d0e0e; --surface: #1c1f1e; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #121413;
    --surface: #1c1f1e;
    --surface-sunk: #242827;
    --type: #ecefee;
    --type-muted: #b2b7b5;
    --type-faint: #878d8b;
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-strong: rgba(255, 255, 255, 0.22);
    --accent: var(--teal);
    --accent-wash: rgba(11, 179, 161, 0.14);
    --on-accent: var(--charcoal);
    --focus: var(--mint);
    --ledger: rgba(11, 179, 161, 0.10);
    --warn: #f2b84b;
    --warn-wash: rgba(242, 184, 75, 0.12);
    --danger: #ff8a80;
    --danger-wash: rgba(255, 138, 128, 0.12);
    --trend-od: var(--teal);
    --trend-os: var(--aqua);
    --scrim: rgba(0, 0, 0, 0.6);
    --logo-ring: #1cc4d1;
    --logo-ink: var(--white);
  }
  :root:not([data-theme="light"]) .on-deep { --canvas: #0d0e0e; --surface: #1c1f1e; }
}