/* =====================================================================
 *  RhinoHQ — Design Tokens
 *
 *  The "control tower console" aesthetic: dark charcoal/navy surfaces
 *  with the Red Hot Zone ember-orange accent.
 *
 *  NOTE: hex values are the indicative ones from the FRS. Confirm them
 *  against the live pre-launch site CSS (Open Item 11) — this is the
 *  only file that needs to change when they are confirmed.
 * ===================================================================== */

:root {
    /* ---------------------------------------------------------------
       Surfaces — charcoal / navy
       --------------------------------------------------------------- */
    --rhq-surface-0: #161C25;   /* page background, deepest */
    --rhq-surface-1: #1F2733;   /* primary console surface (brand base) */
    --rhq-surface-2: #273140;   /* raised cards, table headers */
    --rhq-surface-3: #323E50;   /* hover, active rows */
    --rhq-surface-inset: #12171E;

    /* ---------------------------------------------------------------
       Accent — ember orange
       --------------------------------------------------------------- */
    --rhq-accent: #E8622C;
    --rhq-accent-hover: #F2743F;
    --rhq-accent-active: #CE5320;
    --rhq-accent-subtle: rgba(232, 98, 44, 0.14);
    --rhq-accent-border: rgba(232, 98, 44, 0.38);

    /* ---------------------------------------------------------------
       Text
       --------------------------------------------------------------- */
    --rhq-text-primary: #F2F5F9;
    --rhq-text-secondary: #B4BFCE;
    --rhq-text-muted: #7C8899;
    --rhq-text-inverse: #161C25;
    --rhq-text-on-accent: #FFFFFF;

    /* ---------------------------------------------------------------
       Borders
       --------------------------------------------------------------- */
    --rhq-border-subtle: rgba(255, 255, 255, 0.08);
    --rhq-border-strong: rgba(255, 255, 255, 0.16);
    --rhq-border-focus: var(--rhq-accent);

    /* ---------------------------------------------------------------
       Semantic status colours
       Compliance uses these consistently:
         valid = success, expiring = warning,
         expired = danger, missing = neutral
       Never encode status by colour alone — always pair with an icon
       and a text label.
       --------------------------------------------------------------- */
    --rhq-success: #3FB27F;
    --rhq-success-bg: rgba(63, 178, 127, 0.14);
    --rhq-success-border: rgba(63, 178, 127, 0.40);

    --rhq-warning: #E5A64B;
    --rhq-warning-bg: rgba(229, 166, 75, 0.14);
    --rhq-warning-border: rgba(229, 166, 75, 0.40);

    --rhq-danger: #E05252;
    --rhq-danger-bg: rgba(224, 82, 82, 0.14);
    --rhq-danger-border: rgba(224, 82, 82, 0.40);

    --rhq-info: #4E9AD4;
    --rhq-info-bg: rgba(78, 154, 212, 0.14);
    --rhq-info-border: rgba(78, 154, 212, 0.40);

    --rhq-neutral: #7C8899;
    --rhq-neutral-bg: rgba(124, 136, 153, 0.14);
    --rhq-neutral-border: rgba(124, 136, 153, 0.40);

    /* ---------------------------------------------------------------
       Typography
       --------------------------------------------------------------- */
    --rhq-font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --rhq-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --rhq-font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, Monaco, monospace;

    --rhq-text-xs: 0.75rem;     /* 12px */
    --rhq-text-sm: 0.875rem;    /* 14px */
    --rhq-text-base: 1rem;      /* 16px */
    --rhq-text-lg: 1.125rem;    /* 18px */
    --rhq-text-xl: 1.375rem;    /* 22px */
    --rhq-text-2xl: 1.75rem;    /* 28px */
    --rhq-text-3xl: 2.25rem;    /* 36px */
    --rhq-text-4xl: 3rem;       /* 48px */

    --rhq-leading-tight: 1.2;
    --rhq-leading-normal: 1.55;
    --rhq-leading-relaxed: 1.75;

    --rhq-weight-regular: 400;
    --rhq-weight-medium: 500;
    --rhq-weight-semibold: 600;
    --rhq-weight-bold: 700;

    --rhq-tracking-eyebrow: 0.12em;

    /* ---------------------------------------------------------------
       Spacing — 4px base
       --------------------------------------------------------------- */
    --rhq-space-1: 0.25rem;
    --rhq-space-2: 0.5rem;
    --rhq-space-3: 0.75rem;
    --rhq-space-4: 1rem;
    --rhq-space-5: 1.25rem;
    --rhq-space-6: 1.5rem;
    --rhq-space-8: 2rem;
    --rhq-space-10: 2.5rem;
    --rhq-space-12: 3rem;
    --rhq-space-16: 4rem;
    --rhq-space-20: 5rem;

    /* ---------------------------------------------------------------
       Radius
       --------------------------------------------------------------- */
    --rhq-radius-sm: 4px;
    --rhq-radius-md: 8px;
    --rhq-radius-lg: 12px;
    --rhq-radius-xl: 16px;
    --rhq-radius-full: 999px;

    /* ---------------------------------------------------------------
       Elevation
       --------------------------------------------------------------- */
    --rhq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --rhq-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
    --rhq-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.40);
    --rhq-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.48);

    /* ---------------------------------------------------------------
       Layout
       --------------------------------------------------------------- */
    --rhq-sidebar-width: 260px;
    --rhq-topbar-height: 64px;
    --rhq-container-max: 1400px;
    --rhq-content-max: 72ch;

    /* ---------------------------------------------------------------
       Motion
       --------------------------------------------------------------- */
    --rhq-transition-fast: 120ms ease;
    --rhq-transition-base: 200ms ease;
    --rhq-transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ---------------------------------------------------------------
       Z-index scale
       --------------------------------------------------------------- */
    --rhq-z-dropdown: 100;
    --rhq-z-sticky: 200;
    --rhq-z-drawer: 300;
    --rhq-z-modal: 400;
    --rhq-z-toast: 500;
    --rhq-z-update: 600;   /* the update popup sits above everything */
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --rhq-transition-fast: 0ms;
        --rhq-transition-base: 0ms;
        --rhq-transition-slow: 0ms;
    }
}