/* ═══════════════════════════════════════════════════════════════════
   CATEY PORTAL — DESIGN TOKENS
   Single source of truth. Imported by portal.css, admin.css, guest.css.
   Change a value here, it updates everywhere.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ─── BRAND COLOURS ─── */
    --accent:            #8A192B;
    --accent-hover:      #a01e33;
    --accent-active:     #6e1423;
    --accent-tint:       rgba(138, 25, 43, 0.08);
    --accent-tint-hover: rgba(138, 25, 43, 0.14);

    /* ─── NEUTRALS ─── */
    --bg:            #F0EDE7;
    --surface:       #F8F6F2;
    --surface-alt:   #ffffff;
    --surface-hover: #EBE8E2;
    --surface-active:#E4DFD6;

    /* ─── TEXT ─── */
    --text:         #1C1C1C;
    --text-muted:   #5E5E5E;
    --text-subtle:  #999999;
    --text-faint:   #BBBBBB;
    --text-inverse: #ffffff;

    /* ─── BORDERS ─── */
    --border:       #E8E4DC;
    --border-light: #F0ECE4;
    --border-strong:#D4CEC2;

    /* ─── SEMANTIC (status) ─── */
    --success:       #1e8449;
    --success-tint:  rgba(30, 132, 73, 0.10);
    --warning:       #b87333;
    --warning-tint:  rgba(184, 115, 51, 0.10);
    --danger:        #c0392b;
    --danger-tint:   rgba(192, 57, 43, 0.10);
    --info:          #2980b9;
    --info-tint:     rgba(41, 128, 185, 0.10);

    /* ─── TYPOGRAPHY ─── */
    --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", sans-serif;
    --font-serif: "Playfair Display", Georgia, serif;
    --font-mono:  "SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace;

    --fs-xs:   11px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;

    --lh-tight:   1.2;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;

    --ls-label: 0.05em;
    --ls-caps:  0.08em;

    /* ─── SPACING (4-pt base) ─── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ─── RADII ─── */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* ─── SHADOWS ─── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* ─── MOTION ─── */
    --ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:  120ms;
    --dur:       200ms;
    --dur-slow:  320ms;

    /* ─── LAYOUT ─── */
    --content-max:   1200px;
    --content-wide:  1400px;
    --header-height: 52px;
    --sidebar-width: 180px;
    --sidebar-width-compact: 64px;
    --toolbar-height: 48px;
    --status-bar-height: 32px;

    --z-header:      50;
    --z-drawer:      80;
    --z-modal:       100;
    --z-toast:       200;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESETS
   ═══════════════════════════════════════════════════════════════════ */

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

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

[x-cloak] { display: none !important; }

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