/*
 * RealtyIQ design tokens (T43) - docs/02-DESIGN-SYSTEM.md.
 * Tokens only: no selectors other than :root and the two dark-theme forms.
 *
 * App surface "Bento Grid Clean": light grey canvas, white tiles, navy sidebar.
 * Inside the app --rq-primary is the TENANT colour: layouts/app.blade.php
 * re-declares --rq-primary, --rq-primary-contrast and --rq-primary-ink in a
 * <style nonce> after this file. The dark blocks below never touch
 * --rq-primary, so the tenant colour survives a theme switch; the layout
 * supplies a lightened --rq-primary-ink for dark itself.
 *
 * Contrast (WCAG 2.x, checked numerically): --rq-text and --rq-text-muted are
 * >= 5.8:1 on --rq-bg, --rq-surface and --rq-surface-2 in both themes; every
 * status colour is >= 4.5:1 on --rq-surface and on its own *-soft tint.
 * --rq-money (#B86E00) is 3.99:1 on white, so it is for large numerals only
 * (>= 24px, AA-large); small amber text uses --rq-money-ink (6.0:1).
 */

:root {
    color-scheme: light;

    /* Palette - Recilens logo colours, tuned for contrast */
    --rq-navy: #0B1F3A;
    --rq-navy-2: #12294A;
    --rq-brand: #1D5FBF;
    --rq-brand-contrast: #FFFFFF;
    --rq-money: #B86E00;
    --rq-money-ink: #8F5600;
    --rq-money-fill: #FC9C00;

    /* Surfaces and text */
    --rq-bg: #F2F4F7;
    --rq-surface: #FFFFFF;
    --rq-surface-2: #F7F8FA;
    --rq-surface-3: #EDF0F4;
    --rq-border: #E3E7ED;
    --rq-border-strong: #C9D0DA;
    --rq-text: #0E1A2B;
    --rq-text-muted: #526075;
    --rq-overlay: rgba(11, 31, 58, 0.48);

    /* Primary: the brand by default, the tenant's colour inside the app */
    --rq-primary: var(--rq-brand);
    --rq-primary-contrast: var(--rq-brand-contrast);
    --rq-primary-ink: var(--rq-brand);
    --rq-primary-soft: color-mix(in srgb, var(--rq-primary) 12%, var(--rq-surface));
    --rq-focus: color-mix(in srgb, var(--rq-primary) 45%, transparent);

    /* Status */
    --rq-success: #18794E;
    --rq-warning: #965500;
    --rq-danger: #C21D2A;
    --rq-info: #0E6A9E;
    --rq-violet: #6B3FB8;
    --rq-orange: #B4480F;
    --rq-neutral: #526075;
    --rq-success-soft: color-mix(in srgb, var(--rq-success) 12%, var(--rq-surface));
    --rq-warning-soft: color-mix(in srgb, var(--rq-warning) 12%, var(--rq-surface));
    --rq-danger-soft: color-mix(in srgb, var(--rq-danger) 10%, var(--rq-surface));
    --rq-info-soft: color-mix(in srgb, var(--rq-info) 12%, var(--rq-surface));
    --rq-violet-soft: color-mix(in srgb, var(--rq-violet) 11%, var(--rq-surface));
    --rq-orange-soft: color-mix(in srgb, var(--rq-orange) 11%, var(--rq-surface));
    --rq-neutral-soft: var(--rq-surface-3);
    --rq-money-soft: color-mix(in srgb, var(--rq-money-fill) 14%, var(--rq-surface));

    /* WhatsApp click-to-chat: one green in both themes; white text 4.9:1, 3.6:1 against the dark surface */
    --rq-whatsapp: #128245;
    --rq-whatsapp-hover: #0E6B39;
    --rq-whatsapp-contrast: #FFFFFF;

    /* Sidebar (navy in both themes) */
    --rq-side-bg: var(--rq-navy);
    --rq-side-text: #C9D3E3;
    --rq-side-muted: #8FA0BA;
    --rq-side-hover: rgba(255, 255, 255, 0.07);
    --rq-side-border: rgba(255, 255, 255, 0.08);

    /* Type - "Modern editorial": Inter Tight 600 display, Inter body, Instrument Serif italic accent */
    --rq-font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rq-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
    --rq-font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --rq-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --rq-tracking-display: -0.02em;

    /* 1.200 scale on a 16px base */
    --rq-fs-xs: .75rem;      /* 12px */
    --rq-fs-sm: .875rem;     /* 14px (UI text) */
    --rq-fs-md: 1rem;        /* 16px */
    --rq-fs-lg: 1.2rem;      /* 19.2px */
    --rq-fs-xl: 1.44rem;     /* 23px */
    --rq-fs-2xl: 1.728rem;   /* 27.6px */
    --rq-fs-3xl: 2rem;       /* 32px (scale cap) */
    --rq-fw-regular: 400;
    --rq-fw-medium: 500;
    --rq-fw-semibold: 600;
    --rq-lh-tight: 1.2;
    --rq-lh-base: 1.5;

    /* Space - 4px grid */
    --rq-s-1: 4px;
    --rq-s-2: 8px;
    --rq-s-3: 12px;
    --rq-s-4: 16px;
    --rq-s-5: 20px;
    --rq-s-6: 24px;
    --rq-s-7: 28px;
    --rq-s-8: 32px;
    --rq-s-9: 40px;
    --rq-s-10: 48px;

    /* Radius */
    --rq-r-sm: 6px;
    --rq-r-md: 10px;
    --rq-r-lg: 16px;
    --rq-r-full: 999px;

    /* Elevation - soft, cool-tinted */
    --rq-e-1: 0 1px 2px rgba(14, 26, 43, 0.06), 0 1px 1px rgba(14, 26, 43, 0.03);
    --rq-e-2: 0 4px 12px -2px rgba(14, 26, 43, 0.08), 0 2px 4px -2px rgba(14, 26, 43, 0.05);
    --rq-e-3: 0 18px 40px -12px rgba(14, 26, 43, 0.22), 0 6px 12px -6px rgba(14, 26, 43, 0.10);

    /* Motion - hover/press/focus only; capped at --rq-dur. The two loading
       loops derive from it, so reduced motion (--rq-dur: 0ms) stops them. */
    --rq-dur: 150ms;
    --rq-ease: cubic-bezier(.4, 0, .2, 1);
    --rq-dur-loader: calc(var(--rq-dur) * 5);    /* button spinner, 750ms a turn */
    --rq-dur-shimmer: calc(var(--rq-dur) * 10);  /* skeleton sweep, 1.5s */

    /* Layout */
    --rq-sidebar-w: 256px;
    --rq-topbar-h: 60px;
    --rq-tap: 44px;
    --rq-content-max: 1440px;
    --rq-z-topbar: 1020;
    --rq-z-toast: 1090;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --rq-dur: 0ms;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --rq-navy: #060F1F;
        --rq-navy-2: #0C1A30;
        --rq-brand: #5B8DEF;
        --rq-brand-contrast: #0B1F3A;
        --rq-money: #FFB338;
        --rq-money-ink: #FFB338;
        --rq-money-fill: #FFB338;

        --rq-bg: #0A111D;
        --rq-surface: #111A29;
        --rq-surface-2: #172236;
        --rq-surface-3: #1D2A40;
        --rq-border: #243249;
        --rq-border-strong: #33445F;
        --rq-text: #E8EDF4;
        --rq-text-muted: #9AA8BC;
        --rq-overlay: rgba(2, 6, 14, 0.66);

        --rq-primary-soft: color-mix(in srgb, var(--rq-primary) 22%, var(--rq-surface));
        --rq-focus: color-mix(in srgb, var(--rq-primary-ink) 55%, transparent);

        --rq-success: #4ADE80;
        --rq-warning: #FBBF24;
        --rq-danger: #F87171;
        --rq-info: #5CC0F2;
        --rq-violet: #B49CF5;
        --rq-orange: #FB923C;
        --rq-neutral: #9AA8BC;
        --rq-success-soft: color-mix(in srgb, var(--rq-success) 16%, var(--rq-surface));
        --rq-warning-soft: color-mix(in srgb, var(--rq-warning) 16%, var(--rq-surface));
        --rq-danger-soft: color-mix(in srgb, var(--rq-danger) 16%, var(--rq-surface));
        --rq-info-soft: color-mix(in srgb, var(--rq-info) 16%, var(--rq-surface));
        --rq-violet-soft: color-mix(in srgb, var(--rq-violet) 16%, var(--rq-surface));
        --rq-orange-soft: color-mix(in srgb, var(--rq-orange) 16%, var(--rq-surface));
        --rq-neutral-soft: var(--rq-surface-3);
        --rq-money-soft: color-mix(in srgb, var(--rq-money-fill) 16%, var(--rq-surface));

        --rq-side-bg: #070E1B;
        --rq-side-text: #C9D3E3;
        --rq-side-muted: #8FA0BA;
        --rq-side-hover: rgba(255, 255, 255, 0.06);
        --rq-side-border: rgba(255, 255, 255, 0.07);

        --rq-e-1: 0 1px 2px rgba(0, 0, 0, 0.40);
        --rq-e-2: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
        --rq-e-3: 0 22px 48px -12px rgba(0, 0, 0, 0.70);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --rq-navy: #060F1F;
    --rq-navy-2: #0C1A30;
    --rq-brand: #5B8DEF;
    --rq-brand-contrast: #0B1F3A;
    --rq-money: #FFB338;
    --rq-money-ink: #FFB338;
    --rq-money-fill: #FFB338;

    --rq-bg: #0A111D;
    --rq-surface: #111A29;
    --rq-surface-2: #172236;
    --rq-surface-3: #1D2A40;
    --rq-border: #243249;
    --rq-border-strong: #33445F;
    --rq-text: #E8EDF4;
    --rq-text-muted: #9AA8BC;
    --rq-overlay: rgba(2, 6, 14, 0.66);

    --rq-primary-soft: color-mix(in srgb, var(--rq-primary) 22%, var(--rq-surface));
    --rq-focus: color-mix(in srgb, var(--rq-primary-ink) 55%, transparent);

    --rq-success: #4ADE80;
    --rq-warning: #FBBF24;
    --rq-danger: #F87171;
    --rq-info: #5CC0F2;
    --rq-violet: #B49CF5;
    --rq-orange: #FB923C;
    --rq-neutral: #9AA8BC;
    --rq-success-soft: color-mix(in srgb, var(--rq-success) 16%, var(--rq-surface));
    --rq-warning-soft: color-mix(in srgb, var(--rq-warning) 16%, var(--rq-surface));
    --rq-danger-soft: color-mix(in srgb, var(--rq-danger) 16%, var(--rq-surface));
    --rq-info-soft: color-mix(in srgb, var(--rq-info) 16%, var(--rq-surface));
    --rq-violet-soft: color-mix(in srgb, var(--rq-violet) 16%, var(--rq-surface));
    --rq-orange-soft: color-mix(in srgb, var(--rq-orange) 16%, var(--rq-surface));
    --rq-neutral-soft: var(--rq-surface-3);
    --rq-money-soft: color-mix(in srgb, var(--rq-money-fill) 16%, var(--rq-surface));

    --rq-side-bg: #070E1B;
    --rq-side-text: #C9D3E3;
    --rq-side-muted: #8FA0BA;
    --rq-side-hover: rgba(255, 255, 255, 0.06);
    --rq-side-border: rgba(255, 255, 255, 0.07);

    --rq-e-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --rq-e-2: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
    --rq-e-3: 0 22px 48px -12px rgba(0, 0, 0, 0.70);
}