/* ============================================================================================
   Novalie Pharma — design tokens
   The single source of truth for colour, type, space, radius, shadow and motion.
   Brand colours are injected at runtime from Site Settings as --brand-* variables; the fallbacks here are the defaults.
   ============================================================================================ */

:root {
    /* -- Brand ------------------------------------------------------------------------------
       The primary is the violet lifted straight from the Novalie wordmark. Each brand colour arrives
       from Admin → Site settings → Brand as a --brand-* variable (see App.razor), and the rest of
       the scale is mixed from those, so a change recolours the whole interface coherently rather
       than leaving a hard-coded shade behind.
       ---------------------------------------------------------------------------------------- */
    --primary: var(--brand-primary, #93358D);
    --primary-800: var(--brand-primary-deep, #45193F);

    --primary-600: color-mix(in srgb, var(--primary) 88%, #000);
    --primary-700: color-mix(in srgb, var(--primary) 70%, #000);
    --primary-100: color-mix(in srgb, var(--primary) 18%, var(--surface));
    --primary-050: color-mix(in srgb, var(--primary) 8%, var(--surface));

    /* Teal reads as clinical and clean against the violet, and keeps contrast honest. */
    --accent: var(--brand-accent, #0FA3A3);
    --accent-600: color-mix(in srgb, var(--accent) 86%, #000);
    --accent-800: color-mix(in srgb, var(--accent) 60%, #000);
    --accent-050: color-mix(in srgb, var(--accent) 10%, var(--surface));

    /* Kept as its own token so gradient stops and the admin mark stay tied to the wordmark
       even if the primary is ever retuned. */
    --brand: var(--brand-wordmark, #93358D);

    /* Light teal for accents on dark surfaces. Set from Site Settings → Brand → Highlight colour. */
    --highlight: var(--brand-highlight, #66DCD7);
    --brand-050: color-mix(in srgb, var(--brand) 9%, var(--surface));

    /* -- Semantic --------------------------------------------------------------------------- */
    --success: #12805C;
    --success-050: #E6F5EF;
    --warning: #B26A00;
    --warning-050: #FDF3E4;
    --danger: #C0334A;
    --danger-050: #FCECEF;
    --info: #1C6EAF;
    --info-050: #E9F3FB;

    /* -- Surfaces --------------------------------------------------------------------------- */
    --background: #FFFFFF;
    --background-alt: #F6F9FC;
    --background-deep: #EDF2F8;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-sunken: #F9FBFD;
    --overlay: rgba(6, 22, 40, .55);

    /* -- Text ------------------------------------------------------------------------------- */
    --text: #0F1D2E;
    --text-strong: #061628;
    --muted: #5B6B80;
    --muted-soft: #8494A6;
    --on-primary: #FFFFFF;
    --on-accent: #FFFFFF;

    /* -- Lines ------------------------------------------------------------------------------ */
    --border: #E2E9F1;
    --border-strong: #CBD7E4;
    --border-focus: var(--accent);

    /* -- Type ------------------------------------------------------------------------------- */
    --font-sans: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-arabic: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
    --font-display: var(--font-sans);
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-2xs: .6875rem;   /* 11 */
    --text-xs: .75rem;      /* 12 */
    --text-sm: .8125rem;    /* 13 */
    --text-base: .9375rem;  /* 15 */
    --text-md: 1rem;        /* 16 */
    --text-lg: 1.125rem;    /* 18 */
    --text-xl: 1.375rem;    /* 22 */
    --text-2xl: 1.75rem;    /* 28 */
    --text-3xl: 2.25rem;    /* 36 */
    --text-4xl: 3rem;       /* 48 */
    --text-5xl: 3.75rem;    /* 60 */

    --leading-tight: 1.14;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -.022em;
    --tracking-normal: 0;
    --tracking-wide: .08em;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* -- Space ------------------------------------------------------------------------------ */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --section-y: clamp(3.5rem, 7vw, 7rem);
    --container: 78rem;
    --container-narrow: 46rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* -- Radius ----------------------------------------------------------------------------- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-pill: 999px;

    /* -- Elevation -------------------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(9, 30, 55, .06);
    --shadow-sm: 0 2px 6px rgba(9, 30, 55, .06), 0 1px 2px rgba(9, 30, 55, .04);
    --shadow: 0 8px 24px rgba(9, 30, 55, .08), 0 2px 6px rgba(9, 30, 55, .04);
    --shadow-lg: 0 18px 48px rgba(9, 30, 55, .12), 0 4px 12px rgba(9, 30, 55, .05);
    --shadow-xl: 0 32px 80px rgba(9, 30, 55, .16), 0 8px 20px rgba(9, 30, 55, .06);
    --shadow-focus: 0 0 0 3px rgba(15, 163, 163, .28);

    /* -- Motion ----------------------------------------------------------------------------- */
    --ease-out: cubic-bezier(.22, .8, .3, 1);
    --ease-in-out: cubic-bezier(.6, .05, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
    --duration-fast: 140ms;
    --duration: 240ms;
    --duration-slow: 420ms;
    --duration-slower: 700ms;

    /* -- Layers ----------------------------------------------------------------------------- */
    --z-header: 100;
    --z-drawer: 200;
    --z-modal: 300;
    --z-toast: 400;

    --header-height: 4.75rem;

    color-scheme: light;
}

/* --------------------------------------------------------------------------------------------
   Dark theme. Applied only when the visitor asks for it — the light theme is the brand default.
   -------------------------------------------------------------------------------------------- */

:root[data-theme="dark"] {
    --background: #08131F;
    --background-alt: #0C1B2B;
    --background-deep: #101F31;
    --surface: #0F1E2E;
    --surface-raised: #142639;
    --surface-sunken: #0A1725;
    --overlay: rgba(2, 8, 15, .7);

    --text: #E8EFF6;
    --text-strong: #FFFFFF;
    --muted: #9DB0C4;
    --muted-soft: #74899F;

    --border: #1D3348;
    --border-strong: #2A455E;

    /* On a dark ground the wordmark violet is lifted so it keeps AA contrast against the
       surfaces below. The tints then mix toward the dark surface rather than toward white. */
    --primary: color-mix(in srgb, var(--brand-primary, #93358D) 60%, #fff);
    --primary-800: color-mix(in srgb, var(--brand-primary-deep, #45193F) 68%, #000);

    --primary-600: color-mix(in srgb, var(--primary) 82%, #FFF);
    --primary-700: color-mix(in srgb, var(--primary) 64%, #FFF);
    --primary-100: color-mix(in srgb, var(--primary) 22%, var(--surface));
    --primary-050: color-mix(in srgb, var(--primary) 11%, var(--surface));

    --accent: color-mix(in srgb, var(--brand-accent, #0FA3A3) 80%, #fff);
    --accent-600: color-mix(in srgb, var(--accent) 80%, #FFF);
    --accent-800: color-mix(in srgb, var(--accent) 38%, #000);
    --accent-050: color-mix(in srgb, var(--accent) 13%, var(--surface));

    --brand: color-mix(in srgb, var(--brand-wordmark, #93358D) 60%, #fff);
    --brand-050: color-mix(in srgb, var(--brand) 12%, var(--surface));

    --success: #34C08E;
    --success-050: #0E2B22;
    --warning: #E0A64A;
    --warning-050: #2E2314;
    --danger: #E8697F;
    --danger-050: #331520;
    --info: #5FAAE8;
    --info-050: #11283B;

    --on-primary: #04121F;
    --on-accent: #04121F;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45);
    --shadow: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
    --shadow-xl: 0 32px 80px rgba(0, 0, 0, .6);
    --shadow-focus: 0 0 0 3px rgba(47, 199, 199, .35);

    color-scheme: dark;
}

/* ============================================================================================
   Reset
   ============================================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Arabic and Kurdish read better in a face designed for the script. */
html[dir="rtl"] body,
html[lang="ar"] body,
html[lang="ku"] body {
    font-family: var(--font-arabic);
    line-height: var(--leading-relaxed);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
    text-wrap: balance;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    font-family: var(--font-arabic);
    letter-spacing: 0;
}

p { margin: 0; text-wrap: pretty; }

a {
    color: var(--primary);
    text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
    text-underline-offset: .2em;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover { color: var(--accent); }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

ul, ol { margin: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Custom scrollbars, kept subtle so they do not compete with the content. */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--background-alt); }
    ::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: var(--radius-pill);
        border: 2px solid var(--background-alt);
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }
}

/* ============================================================================================
   Layout primitives
   ============================================================================================ */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-alt { background: var(--background-alt); }
.section-deep { background: var(--background-deep); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.spacer { flex: 1 1 auto; }

/* ============================================================================================
   Type helpers
   ============================================================================================ */

.display {
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 5.5vw, var(--text-5xl));
    font-weight: var(--weight-black);
    line-height: 1.06;
    letter-spacing: -.03em;
}

.title-lg { font-size: clamp(1.875rem, 3.6vw, var(--text-3xl)); }
.title { font-size: clamp(1.5rem, 2.8vw, var(--text-2xl)); }
.title-sm { font-size: var(--text-xl); }

.lead {
    font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
    line-height: var(--leading-relaxed);
    color: var(--muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
}

html[dir="rtl"] .eyebrow { letter-spacing: 0; }

.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.tabular { font-variant-numeric: tabular-nums; }

.text-gradient {
    background: linear-gradient(100deg, var(--primary) 0%, var(--accent) 55%, var(--brand) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Clamp helpers for card copy of uneven length. */
.clamp-1, .clamp-2, .clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ============================================================================================
   Accessibility
   ============================================================================================ */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    top: -4rem;
    z-index: calc(var(--z-header) + 10);
    padding: var(--space-3) var(--space-5);
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: top var(--duration) var(--ease-out);
}

.skip-link:focus { top: var(--space-4); color: var(--on-primary); }

/* ============================================================================================
   Logical-property helpers, so RTL needs no mirrored rules
   ============================================================================================ */

.flip-rtl { transition: transform var(--duration) var(--ease-out); }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }