/* ==========================================================================
   Design tokens: Mohammed Al Sari
   Brand colour: violet. Every colour, radius, shadow and motion value in the
   site CSS should come from here. Loaded after the legacy stylesheet so the
   legacy variable names below are re-pointed at the brand palette.
   ========================================================================== */

/* Web fonts load with display=swap. Until they arrive, text uses these local
   fonts, scaled and given the web font's vertical metrics so that lines wrap
   the same and the swap barely moves anything (it caused the home page's
   layout shift, CLS 0.19). Values measured from the actual font files
   against Arial / Georgia Bold (fontTools, same method as next/font). */
@font-face {
    font-family: 'Roboto Fallback';
    src: local('Arial'), local('ArialMT');
    size-adjust: 100.49%;
    ascent-override: 92.32%;
    descent-override: 24.29%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Playfair Display SC Fallback';
    src: local('Georgia Bold'), local('Georgia-Bold');
    font-weight: 400 900;
    size-adjust: 109.64%;
    ascent-override: 98.69%;
    descent-override: 22.89%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Playfair Display Fallback';
    src: local('Georgia Bold'), local('Georgia-Bold');
    font-weight: 400 900;
    size-adjust: 89.15%;
    ascent-override: 121.37%;
    descent-override: 28.15%;
    line-gap-override: 0%;
}
:root {
    /* Violet brand scale */
    --violet-50: #f5f3ff;
    --violet-100: #ede9fe;
    --violet-200: #ddd6fe;
    --violet-300: #c4b5fd;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-800: #5b21b6;
    --violet-900: #4c1d95;
    --violet-950: #2e1065;

    /* Deep surfaces (header, hero, footer) */
    --night-900: #1a0b33;
    --night-800: #241046;
    --night-700: #2f1559;

    /* Neutrals */
    --ink: #1c1631;
    --ink-muted: #5b5670;
    --ink-subtle: #8a849c;
    --surface: #ffffff;
    --surface-soft: #f8f6fd;
    --surface-muted: #f1edfb;
    --ui-line: #e6e1f2;

    /* Accent (sparingly: highlights, badges) */
    --gold-500: #d4a64a;
    --gold-100: #faf1dc;

    /* Status */
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --info: #1d4ed8;

    /* Semantic */
    --brand: var(--violet-600);
    --brand-strong: var(--violet-700);
    --brand-soft: var(--violet-100);
    --header-bg: linear-gradient(90deg, var(--night-800) 0%, var(--violet-950) 100%);
    --footer-bg: var(--night-900);
    --gradient-brand: linear-gradient(135deg, var(--violet-700) 0%, var(--violet-500) 100%);
    --gradient-page: linear-gradient(135deg, var(--night-800) 0%, var(--violet-950) 55%, var(--violet-900) 100%);
    --focus-ring: 0 0 0 3px rgba(139, 92, 246, .45);

    /* Type */
    --font-display: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
    --font-body: 'Roboto', 'Roboto Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-xs: .8125rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;

    /* Shape & depth */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(28, 22, 49, .06), 0 1px 3px rgba(28, 22, 49, .08);
    --shadow-md: 0 10px 24px -12px rgba(46, 16, 101, .28);
    --shadow-card: 0 18px 40px -18px rgba(46, 16, 101, .38);

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 150ms;
    --dur: 220ms;

    /* Layout */
    --container-max: 1200px;
    --header-h: 76px;

    /* ---- Legacy names used across style.css / page CSS, re-pointed ---- */
    --brand-700: var(--violet-800);
    --brand-600: var(--violet-700);
    --brand-500: var(--violet-600);
    --brand-100: var(--violet-100);
    --purple: var(--violet-600);
    --purple-dark: var(--violet-900);
    --pc3: var(--violet-900);
    --body-pc: var(--gradient-page);
    --heading: var(--ink);
    --text: var(--ink-muted);
    --muted: var(--ink-subtle);
    --msm-primary: var(--violet-600);
    --mc-primary: var(--violet-600);
    --mc-primary-dark: var(--violet-800);
    --pp-purple: var(--violet-600);
}

html {
    scroll-padding-top: calc(var(--header-h) + 12px);
}

::selection {
    background: var(--violet-200);
    color: var(--ink);
}

/* Visible, consistent keyboard focus everywhere. */
:focus-visible {
    outline: 2px solid var(--violet-400);
    outline-offset: 2px;
}

a,
button,
.btn {
    transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}