/**
 * FlipLane Professional Design System Tokens
 * Mobile-First • WCAG AA Accessible • Dark Mode Native
 */

:root {
    /* Brand Color Palette */
    --fp-primary: #00e676;
    --fp-primary-hover: #00c853;
    --fp-primary-glow: rgba(0, 230, 118, 0.35);
    --fp-accent: #FF6B00;
    --fp-accent-hover: #E05E00;
    --fp-accent-glow: rgba(255, 107, 0, 0.25);

    /* Backgrounds & Surfaces */
    --fp-bg: #0B0F19;
    --fp-surface: #111827;
    --fp-surface-hover: #1F2937;
    --fp-surface-elevated: #182234;
    --fp-overlay: rgba(11, 15, 25, 0.85);

    /* Borders */
    --fp-border: #1F2937;
    --fp-border-light: #2D3748;
    --fp-border-focus: #00e676;

    /* Typography */
    --fp-text: #F8FAFC;
    --fp-text-secondary: #CBD5E1;
    --fp-muted: #94A3B8;
    --fp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fp-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    /* Semantic Feedback */
    --fp-success: #10B981;
    --fp-success-bg: rgba(16, 185, 129, 0.12);
    --fp-warning: #F59E0B;
    --fp-warning-bg: rgba(245, 158, 11, 0.12);
    --fp-danger: #EF4444;
    --fp-danger-bg: rgba(239, 68, 68, 0.12);
    --fp-info: #3B82F6;
    --fp-info-bg: rgba(59, 130, 246, 0.12);

    /* Radii */
    --fp-radius-sm: 6px;
    --fp-radius-md: 12px;
    --fp-radius-lg: 20px;
    --fp-radius-full: 9999px;

    /* Elevation & Shadows */
    --fp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --fp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --fp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);

    /* Spacing Scale (4, 8, 12, 16, 24, 32, 48, 64) */
    --fp-space-1: 4px;
    --fp-space-2: 8px;
    --fp-space-3: 12px;
    --fp-space-4: 16px;
    --fp-space-5: 24px;
    --fp-space-6: 32px;
    --fp-space-7: 48px;
    --fp-space-8: 64px;

    /* Transitions */
    --fp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --fp-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Accessibility & Focus Rings */
:focus-visible {
    outline: 2px solid var(--fp-border-focus);
    outline-offset: 2px;
}

/* Reusable Component Classes */
.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--fp-space-2) var(--fp-space-4);
    font-family: var(--fp-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--fp-radius-md);
    transition: all var(--fp-transition-fast);
    cursor: pointer;
    text-decoration: none;
    gap: var(--fp-space-2);
    border: 1px solid transparent;
}

.fp-btn-primary {
    background: var(--fp-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px var(--fp-primary-glow);
}
.fp-btn-primary:hover {
    background: var(--fp-primary-hover);
    transform: translateY(-1px);
}

.fp-btn-accent {
    background: var(--fp-accent);
    color: #ffffff;
    box-shadow: 0 2px 8px var(--fp-accent-glow);
}
.fp-btn-accent:hover {
    background: var(--fp-accent-hover);
    transform: translateY(-1px);
}

.fp-btn-secondary {
    background: var(--fp-surface);
    border-color: var(--fp-border);
    color: var(--fp-text);
}
.fp-btn-secondary:hover {
    background: var(--fp-surface-hover);
    border-color: var(--fp-border-light);
}

.fp-btn-danger {
    background: var(--fp-danger);
    color: #ffffff;
}
.fp-btn-danger:hover {
    background: #DC2626;
}

.fp-input, .fp-select {
    width: 100%;
    padding: var(--fp-space-3) var(--fp-space-4);
    background: var(--fp-bg);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    color: var(--fp-text);
    font-family: var(--fp-font-sans);
    font-size: 0.875rem;
    transition: border-color var(--fp-transition-fast);
}
.fp-input:focus, .fp-select:focus {
    border-color: var(--fp-border-focus);
}

.fp-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    padding: var(--fp-space-6);
    box-shadow: var(--fp-shadow-md);
}

.fp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--fp-space-2);
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--fp-font-mono);
    border-radius: var(--fp-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fp-badge-success { background: var(--fp-success-bg); color: var(--fp-success); border: 1px solid rgba(16, 185, 129, 0.2); }
.fp-badge-warning { background: var(--fp-warning-bg); color: var(--fp-warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.fp-badge-danger { background: var(--fp-danger-bg); color: var(--fp-danger); border: 1px solid rgba(239, 68, 68, 0.2); }
.fp-badge-info { background: var(--fp-info-bg); color: var(--fp-info); border: 1px solid rgba(59, 130, 246, 0.2); }

/* Loading Skeleton */
.fp-skeleton {
    background: linear-gradient(90deg, #111827 25%, #1F2937 50%, #111827 75%);
    background-size: 200% 100%;
    animation: fp-shimmer 1.5s infinite;
    border-radius: var(--fp-radius-md);
}
@keyframes fp-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty State */
.fp-empty-state {
    text-align: center;
    padding: var(--fp-space-8) var(--fp-space-4);
    color: var(--fp-muted);
}
.fp-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--fp-space-3);
    color: var(--fp-border-light);
}

/* ===========================================================================
   MOBILE AUDIT FLOOR — minimum legible type, minimum touch target
   ===========================================================================

   These mirror the identical block at the end of /styles.css. They have to
   exist in BOTH files because the site has two disjoint stylesheets: the public
   pages load styles.css from templates/header.php, while /docs/* (via
   templates/docs/_layout.twig) and the pages built on templates/layouts/base.twig
   — including /profile — load tokens.css instead. Neither includes the other.

   That split is why the first attempt at this fix looked like it had half
   worked: /docs and /profile were unchanged because the rule was only in
   styles.css, which they never load.

   WHY !important
   Tailwind is loaded from cdn.tailwindcss.com and injects its stylesheet at
   runtime, so its position relative to this file is not ours to control. A
   same-specificity rule could lose the cascade depending on load order.
   --------------------------------------------------------------------------- */

.text-\[9px\],
.text-\[10px\],
.text-\[11px\] {
    font-size: 12px !important;
}

/* Touch targets: 44x44 per WCAG 2.5.5. */
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    min-height: 44px;
}

/* Documentation sidebar navigation: each link gets a 44px row. Scoped to the
   sidebar on purpose — inline links inside the prose keep their natural line
   height, because WCAG 2.5.8 exempts targets "in a sentence or otherwise
   constrained by the line-height of non-target text". Forcing 44px on prose
   links would open huge gaps in the middle of paragraphs. */
aside nav a {
    min-height: 44px;
}

/* ---------------------------------------------------------------------------
   DASHBOARD SHELL  (.fl-dash — templates/dashboard/_layout.twig)
   Used by /members and /members/*. The sidebar and header links there are
   sized by Tailwind padding utilities, which land at 16-30px tall.
   Scoped to .fl-dash so nothing here leaks into /docs or /profile, which
   share this stylesheet but have their own layouts.
   --------------------------------------------------------------------------- */

.fl-dash aside a,
.fl-dash aside button,
.fl-dash header a,
.fl-dash header button {
    min-height: 44px;
}

/* The logout control is a bare icon: it needs both dimensions. */
.fl-dash aside a.text-slate-400,
.fl-dash header a[title="Logout"] {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Table row actions (member roster, audit lists). */
.fl-dash table a,
.fl-dash table button {
    min-height: 44px;
}

/* The row action buttons are icon-sized (32px wide), so they need both
   dimensions. */
.fl-dash table button {
    min-width: 44px;
}

/* Every other actionable control in the shell. min-height has no effect on
   a plain inline element, so this only reaches the ones already laid out as
   flex / inline-flex — which is exactly the set that gets flagged. */
.fl-dash a.inline-flex,
.fl-dash a.flex,
.fl-dash button {
    min-height: 44px;
}