@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* Design Tokens - Family OS
   Based on DESIGN.md Heritage Prestige palette and PART60 priority 1 requirements.
   These CSS variables are applied via the portal layout and shared partials.
*/

:root,
[data-theme] {
    /* ============================================================
       Color Palette (PART60 / DESIGN.md)
       ============================================================ */

    /* Core foundations */
    --obsidian: #0B0F12;        /* Canvas/base - PART60 obsidian */
    --project-dark: #100D0A;    /* Secondary dark - PART60 project dark */
    --walnut: #241810;          /* Tier 1 surface - PART60 walnut */
    --antique-gold: #B08A45;    /* Primary accent - PART60 antique gold */
    --gold-highlight: #D4AF37;  /* Gold fill - PART60 gold highlight */
    --gold-soft: #D7BB7A;       /* Gold soft/champagne - PART60 champagne */
    --ivory: #F0E6D3;           /* Primary text - PART60 ivory */
    --burgundy: #651E26;        /* Secondary accent - PART60 burgundy */

    /* Design system extended palette */
    --surface: #101417;         /* Tier 1 surface */
    --surface-dim: #101417;
    --surface-bright: #363a3d;
    --surface-container-lowest: #0b0f12;
    --surface-container-low: #181c1f;
    --surface-container: #1c2023;
    --surface-container-high: #262a2e;
    --surface-container-highest: #313539;
    --on-surface: #e0e3e7;
    --on-surface-variant: #d0c5af;
    --inverse-surface: #e0e3e7;
    --inverse-on-surface: #2d3134;
    --outline: #99907c;
    --outline-variant: #4d4635;
    --surface-tint: #e9c349;
    --primary: #f2ca50;
    --on-primary: #3c2f00;
    --primary-container: #d4af37;
    --on-primary-container: #554300;
    --inverse-primary: #735c00;
    --secondary: #ffb3b6;
    --on-secondary: #610f1e;
    --secondary-container: #802732;
    --on-secondary-container: #ff989e;
    --tertiary: #dccbb9;
    --on-tertiary: #392f22;
    --tertiary-container: #c0b09f;
    --on-tertiary-container: #4e4335;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --primary-fixed: #ffe088;
    --primary-fixed-dim: #e9c349;
    --on-primary-fixed: #241a00;
    --on-primary-fixed-variant: #574500;
    --secondary-fixed: #ffdada;
    --secondary-fixed-dim: #ffb3b6;
    --on-secondary-fixed: #40000d;
    --on-secondary-fixed-variant: #802732;
    --tertiary-fixed: #f2e0cd;
    --tertiary-fixed-dim: #d5c4b2;
    --on-tertiary-fixed: #231a0f;
    --on-tertiary-fixed-variant: #504537;
    --background: #101417;
    --on-background: #e0e3e7;
    --surface-variant: #313539;

    /* ============================================================
       Typography (PART60 / DESIGN.md) - Unified Official: Cairo Medium
       ============================================================ */

    /* Arabic display: Cairo */
    --font-ar-display: 'Cairo', 'Noto Serif Arabic', 'Amiri', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-latin-display: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    /* UI labels, navigation, controls: Cairo */
    --font-ui: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    /* Heading sizes */
    --fs-display-xl: 56px;
    --fs-display-xl-mobile: 36px;
    --fs-headline-lg: 40px;
    --fs-headline-lg-mobile: 28px;
    --fs-headline-md: 28px;
    --fs-headline-sm: 22px;
    --fs-title-lg: 20px;
    --fs-title-md: 17px;
    --fs-body-lg: 16px;
    --fs-body-md: 14px;
    --fs-body-sm: 12px;
    --fs-label-md: 13px;
    --fs-label-sm: 11px;

    /* ============================================================
       Shape / Radius
       ============================================================ */

    --r-sm: 0.125rem;
    --r-default: 0.25rem;
    --r-md: 0.375rem;
    --r-lg: 0.5rem;
    --r-xl: 0.75rem;
    --r-full: 9999px;

    /* ============================================================
       Spacing
       ============================================================ */

    --gutter: 1.5rem;
    --gutter-mobile: 1rem;
    --margin: 3rem;
    --margin-mobile: 1.25rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;

    /* ============================================================
       Elevation / Shadow (subtle, gold-based)
       ============================================================ */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Gold ambient glow */
    --glow-gold: 0 0 20px rgba(212, 175, 55, 0.25);

    /* ============================================================
       Transition timing
       ============================================================ */

    --dur-fast: 150ms;
    --dur-normal: 250ms;
    --dur-slow: 500ms;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root *,
    [data-theme] * {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
    }
}

/* RTL support: start/end padding swap */
[dir="rtl"] .start-gutter {
    margin-left: var(--gutter);
    margin-right: 0;
}
[dir="rtl"] .end-gutter {
    margin-left: 0;
    margin-right: var(--gutter);
}

/* Ensure ivory text on dark backgrounds has good contrast */
.ivory-text {
    color: var(--ivory);
}

/* Antique gold accent */
.gold-accent {
    color: var(--antique-gold);
    background: transparent;
}

.gold-bg {
    background: var(--antique-gold);
    color: var(--obsidian);
}

/* Burgundy accent */
.burgundy-accent {
    color: var(--burgundy);
}

/* Button styles using tokens */
.btn {
    font-family: var(--font-ui);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn-primary {
    background: var(--gold-highlight);
    color: var(--obsidian);
    border: none;
}

.btn-primary:hover {
    background: var(--antique-gold);
    box-shadow: var(--glow-gold);
}

.btn-secondary {
    background: var(--burgundy);
    color: var(--ivory);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.btn-secondary:hover {
    background: #5a121d;
    border-color: rgba(212, 175, 55, 0.4);
}

.btn-ghost {
    background: transparent;
    color: var(--on-surface-variant);
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.btn-ghost:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--antique-gold);
}

/* Card base */
.card {
    background: var(--surface-container);
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.card:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

/* Focus ring using gold */
*:focus-visible {
    outline: 2px solid var(--antique-gold);
    outline-offset: 2px;
}

/* Empty state */
.empty-state {
    color: var(--on-surface-variant);
    text-align: center;
}

/* Status flash using design tokens */
.flash {
    border-color: var(--antique-gold);
    background: rgba(176, 138, 69, 0.1);
    color: var(--antique-gold);
    font-weight: 600;
}

/* Gold dust particles canvas will be initialized via JS */
.cinematic-intro__particles {
    /* canvas rendered by JS */
}

/* ============================================================
   Dark Mode & High Contrast Hardening
   Prevents invisible text, white dropdown bugs, and low contrast
   ============================================================ */
select option {
    background-color: #111827 !important;
    color: #f8fafc !important;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 0.9 !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    color-scheme: dark;
}

table th {
    color: #cbd5e1 !important;
}

.muted,
.text-muted {
    color: #94a3b8 !important;
}