/* ============================================
   FORTISAN - Foundation
   Design tokens + accessibility baseline, shared by every layout
   (public _Layout and _PortalLayout). Load this before any other site CSS.
   ============================================ */

/* === Design Tokens === */
:root {
    --color-primary: #39b0a0;          /* brand teal: accents, borders, icons, large text */
    --color-primary-dark: #2d8a7d;
    --color-primary-strong: #247a6e;   /* white text on this passes WCAG AA (5.1:1): filled buttons */
    --color-primary-deep: #1a5d54;     /* white text 7.8:1; teal body text on white */
    --color-primary-light: #e8f5f3;
    --color-accent: #1a1a1a;
    --color-gold: #c9a962;
    --color-gold-light: #f5f0e3;
    --color-gold-deep: #8a6d2a;        /* gold as text on light backgrounds */
    --color-rose: #e8b4c8;             /* soft accent: Ontspanning + Cosmetisch; decorative only (1.8:1) */
    --color-rose-light: #fdf2f6;
    --color-rose-deep: #9c4f72;        /* rose as text/links (5.6:1) */
    --color-background: #fafafa;
    --color-white: #ffffff;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-border: #e0e0e0;
    --color-border-dark: #1a1a1a;

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

    --border-thin: 1px solid var(--color-border);
    --border-accent: 1px solid var(--color-primary);
    --border-dark: 1px solid var(--color-border-dark);

    --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --focus-ring: 0 0 0 3px rgba(57, 176, 160, 0.45);
    --touch-target: 44px;              /* minimum interactive size (tablet-first admin) */
}

/* === Brand Buttons (AA contrast, shared by portal and auth pages) === */
.btn-brand {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    color: var(--color-white);
}

.btn-brand:hover,
.btn-brand:focus-visible {
    background: var(--color-primary-deep);
    border-color: var(--color-primary-deep);
    color: var(--color-white);
}

.btn-outline-brand {
    border-color: var(--color-primary-strong);
    color: var(--color-primary-strong);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus-visible {
    background: var(--color-primary-strong);
    color: var(--color-white);
}

/* === Accessibility Baseline === */
:focus-visible {
    outline: 2px solid var(--color-primary-deep);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* Skip-link targets (e.g. <main tabindex="-1">) receive focus programmatically: no ring */
[tabindex="-1"]:focus {
    outline: none;
    box-shadow: none;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--spacing-sm);
    z-index: 2000;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-accent);
    color: var(--color-white);
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: var(--spacing-sm);
    color: var(--color-white);
}

@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;
    }
}