/*
 * Design tokens. The only file that holds colour values (error.css aside).
 * See docs/design-system.md for the contrast ratio of every pair.
 */

:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --ft-bg-0: #0b0f17;
    --ft-bg-1: #121826;
    --ft-bg-2: #1a2233;
    --ft-bg-3: #232d42;
    --ft-bg-0-rgb: 11, 15, 23;
    --ft-bg-1-rgb: 18, 24, 38;
    --ft-bg-2-rgb: 26, 34, 51;

    /* Lines */
    --ft-border: #2a3448;
    --ft-border-strong: #6b7893;

    /* Text */
    --ft-text: #e6eaf2;
    --ft-text-muted: #9aa6bc;
    --ft-text-rgb: 230, 234, 242;
    --ft-text-muted-rgb: 154, 166, 188;

    /* Accents */
    --ft-accent: #ff7a1a;
    --ft-accent-hover: #ff9447;
    --ft-accent-text: #ff7a1a;
    --ft-accent-rgb: 255, 122, 26;
    --ft-accent-contrast: #0b0f17;
    --ft-accent-2: #22d3ee;
    --ft-accent-2-rgb: 34, 211, 238;
    --ft-accent-3: #ff3da5;
    --ft-accent-3-rgb: 255, 61, 165;

    /* Status */
    --ft-success: #34d399;
    --ft-success-rgb: 52, 211, 153;
    --ft-warning: #fbbf24;
    --ft-warning-rgb: 251, 191, 36;
    --ft-danger: #f87171;
    --ft-danger-hover: #fca5a5;
    --ft-danger-rgb: 248, 113, 113;
    --ft-info: #22d3ee;
    --ft-info-rgb: 34, 211, 238;

    /* Type */
    --ft-font-heading: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ft-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ft-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Paper: a quote or an invoice (S06) shown as it prints, dark text
       on white whatever the theme. */
    --ft-paper: #ffffff;
    --ft-paper-text: #111827;
    --ft-paper-muted: #4b5563;
    --ft-paper-line: #d1d5db;
    --ft-paper-band: #f3f4f6;
    --ft-paper-stamp: #b91c1c;

    /* Shape and depth */
    --ft-radius-sm: 0.375rem;
    --ft-radius: 0.625rem;
    --ft-radius-lg: 1rem;
    --ft-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
    --ft-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.3);
    --ft-glow: 0 0 0 1px rgba(var(--ft-accent-rgb), 0.35), 0 8px 32px rgba(var(--ft-accent-rgb), 0.18);

    /* Focus and motion */
    --ft-focus: #22d3ee;
    --ft-focus-ring: 0 0 0 2px var(--ft-bg-0), 0 0 0 4px var(--ft-focus);
    --ft-duration: 180ms;
    --ft-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --ft-topbar-height: 3.75rem;
    --ft-sidebar-width: 16.5rem;
    --ft-touch: 2.75rem;
    --ft-measure: 68ch;

    /* Layers */
    --ft-z-sticky: 1020;
    --ft-z-topbar: 1030;
    --ft-z-skip: 1100;

    /*
     * Bootstrap 5.3 variables. Components that read these follow the theme
     * without further work. Components that hard-code their colours are
     * re-mapped in base.css.
     */
    --bs-body-bg: var(--ft-bg-0);
    --bs-body-bg-rgb: var(--ft-bg-0-rgb);
    --bs-body-color: var(--ft-text);
    --bs-body-color-rgb: var(--ft-text-rgb);
    --bs-body-font-family: var(--ft-font-body);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: var(--ft-text);
    --bs-secondary-color: var(--ft-text-muted);
    --bs-secondary-color-rgb: var(--ft-text-muted-rgb);
    --bs-tertiary-color: var(--ft-text-muted);
    --bs-tertiary-color-rgb: var(--ft-text-muted-rgb);

    --bs-secondary-bg: var(--ft-bg-2);
    --bs-secondary-bg-rgb: var(--ft-bg-2-rgb);
    --bs-tertiary-bg: var(--ft-bg-1);
    --bs-tertiary-bg-rgb: var(--ft-bg-1-rgb);

    --bs-border-color: var(--ft-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-border-radius: var(--ft-radius);
    --bs-border-radius-sm: var(--ft-radius-sm);
    --bs-border-radius-lg: var(--ft-radius-lg);

    --bs-primary: var(--ft-accent);
    --bs-primary-rgb: var(--ft-accent-rgb);
    --bs-primary-text-emphasis: var(--ft-accent-hover);
    --bs-primary-bg-subtle: rgba(var(--ft-accent-rgb), 0.12);
    --bs-primary-border-subtle: rgba(var(--ft-accent-rgb), 0.4);

    --bs-success: var(--ft-success);
    --bs-success-rgb: var(--ft-success-rgb);
    --bs-success-text-emphasis: var(--ft-success);
    --bs-success-bg-subtle: rgba(var(--ft-success-rgb), 0.12);
    --bs-success-border-subtle: rgba(var(--ft-success-rgb), 0.4);

    --bs-warning: var(--ft-warning);
    --bs-warning-rgb: var(--ft-warning-rgb);
    --bs-warning-text-emphasis: var(--ft-warning);
    --bs-warning-bg-subtle: rgba(var(--ft-warning-rgb), 0.12);
    --bs-warning-border-subtle: rgba(var(--ft-warning-rgb), 0.4);

    --bs-danger: var(--ft-danger);
    --bs-danger-rgb: var(--ft-danger-rgb);
    --bs-danger-text-emphasis: var(--ft-danger);
    --bs-danger-bg-subtle: rgba(var(--ft-danger-rgb), 0.12);
    --bs-danger-border-subtle: rgba(var(--ft-danger-rgb), 0.4);

    --bs-info: var(--ft-info);
    --bs-info-rgb: var(--ft-info-rgb);
    --bs-info-text-emphasis: var(--ft-info);
    --bs-info-bg-subtle: rgba(var(--ft-info-rgb), 0.12);
    --bs-info-border-subtle: rgba(var(--ft-info-rgb), 0.4);

    --bs-link-color: var(--ft-accent-2);
    --bs-link-color-rgb: var(--ft-accent-2-rgb);
    --bs-link-hover-color: #67e8f9;
    --bs-link-hover-color-rgb: 103, 232, 249;

    --bs-code-color: var(--ft-accent-2);
    --bs-font-monospace: var(--ft-font-mono);
    --bs-focus-ring-color: rgba(var(--ft-accent-2-rgb), 0.5);

    --bs-form-valid-color: var(--ft-success);
    --bs-form-valid-border-color: var(--ft-success);
    --bs-form-invalid-color: var(--ft-danger);
    --bs-form-invalid-border-color: var(--ft-danger);
}

/*
 * Admin area. Same shell, different accents and a plum tint, so an admin can
 * tell the two areas apart. The badge, stripe and icon style in admin.css
 * make the difference visible without relying on colour.
 */
[data-area="admin"] {
    --ft-bg-0: #120e1a;
    --ft-bg-1: #1a1426;
    --ft-bg-2: #241b33;
    --ft-bg-3: #2f2442;
    --ft-bg-0-rgb: 18, 14, 26;
    --ft-bg-1-rgb: 26, 20, 38;
    --ft-bg-2-rgb: 36, 27, 51;

    --ft-border: #3a2d52;
    --ft-border-strong: #8579a3;

    --ft-accent: #ff3da5;
    --ft-accent-hover: #ff66b8;
    --ft-accent-text: #ff66b8;
    --ft-accent-rgb: 255, 61, 165;
    --ft-accent-2: #a78bfa;
    --ft-accent-2-rgb: 167, 139, 250;

    --ft-focus: #a78bfa;

    --bs-link-hover-color: #c4b5fd;
    --bs-link-hover-color-rgb: 196, 181, 253;
}