/* Design tokens — single source of truth for colors, type, spacing, radii.
   Component CSS must reference these vars and never use raw values. */

:root {
    /* ─── Color: surfaces ───────────────────────────────────────────────── */
    --color-bg:               #ffffff;
    --color-surface:          #f0f5ff;     /* sidebar / auth page backdrop */
    --color-header-bg:        #bad0ff1a;   /* header — soft blue tint at 10% */
    --color-surface-muted:    #ededed;     /* neutral chip background */
    --color-table-header-bg:  #f9fafb;     /* table head row backdrop */
    --color-border:           #d1d5db;
    --color-border-strong:    #9ca3af;

    /* ─── Color: text ──────────────────────────────────────────────────── */
    --color-fg-strong:        #0a0a0a;
    --color-fg:               #1f2937;
    --color-fg-muted:         #4a5565;
    --color-fg-subtle:        #6b7280;
    --color-fg-inverse:       #ffffff;

    /* ─── Color: brand / interactive ───────────────────────────────────── */
    --color-primary:          #155dfc;
    --color-primary-hover:    #0f4ad6;
    --color-primary-soft:     #dbeafe;   /* tinted brand bg — active nav, soft highlights */
    --color-primary-fg:       #ffffff;
    --color-notification:     #5b2ee6;
    --color-notification-fg:  #ffffff;
    --color-notification-soft:#ede9fe;
    --color-org-box-bg:       #e4edff;   /* sidebar org box highlight — slightly lighter than --color-primary-soft */
    --color-org-name-fg:      #101828;   /* sidebar org box name text */
    --color-org-detail-subtitle: #62748e; /* org detail header's "Created … by … · slug" line */

    /* ─── Status — paired bg/fg, mapped to Tailwind v4 100/800 family ──── */
    --color-info-bg:          #dbeafe;
    --color-info-fg:          #193cb8;
    --color-success-bg:       #dcfce7;
    --color-success-fg:       #016630;
    --color-warning-bg:       #fef9c2;
    --color-warning-fg:       #894b00;
    /* Platform-admin banner (`.platform-admin-banner`) — its own bg/fg pair,
       distinct from the general warning colors above. */
    --color-admin-banner-bg:  #f6f0d8;
    --color-admin-banner-fg:  #bb4d00;
    --color-danger-bg:        #ffe2e2;
    --color-danger-fg:        #9f0712;
    /* Brighter red (Tailwind red-600) for danger *accents* on a plain surface —
       count text, dots, low-confidence figures. `--color-danger-fg` is tuned for
       legibility on `--color-danger-bg` inside a badge and reads almost brown on
       white, which is why accents get their own value. */
    --color-danger-accent:    #dc2626;
    /* Solid-fill danger buttons (`.button--danger`) — a third, brighter red than
       either of the above; `--color-danger-fg` is intentionally muted for badge
       text, so reusing it as a button fill would make every danger button look
       washed out. */
    --color-danger-solid:     #d0030d;
    --color-danger-solid-hover: #ad020b;
    --color-neutral-bg:       #ededed;
    --color-neutral-fg:       #4a5565;
    /* Sixth badge family (Tailwind violet 100/700). Added for alert statuses,
       whose vocabulary is tenant-configurable: an admin picking a colour needs
       one that is not already spoken for by a lifecycle meaning. */
    --color-accent-bg:        #ede9fe;
    --color-accent-fg:        #6d28d9;
    /* Seventh badge family (Tailwind pink 100/700). Icon chips (e.g. the
       "Quick add" menu) need more distinct hues than the five status colors
       can offer without reusing one for two unrelated items. */
    --color-pink-bg:          #fce7f3;
    --color-pink-fg:          #be185d;

    /* ─── Organization icon-chip colors (Tailwind ~600 family, white text) ── */
    /* The fixed vocabulary an org admin picks from (`services/organizations.py`
       `ICON_COLORS`) when no logo is uploaded — never a raw/free-form color. */
    --color-org-blue:         #2563eb;
    --color-org-purple:       #7c3aed;
    --color-org-teal:         #0d9488;
    --color-org-green:        #16a34a;
    --color-org-orange:       #ea580c;
    --color-org-red:          #dc2626;
    --color-org-pink:         #db2777;
    --color-org-indigo:       #4f46e5;

    /* ─── Typography ───────────────────────────────────────────────────── */
    --font-sans:
        "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono:
        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
        Monaco, Consolas, monospace;

    --fs-xxs:   10px; --lh-xxs:   14px;
    --fs-xs:    12px; --lh-xs:    16px;
    --fs-sm:    14px; --lh-sm:    20px;
    --fs-base:  16px; --lh-base:  24px;
    --fs-lg:    18px; --lh-lg:    28px;
    --fs-xl:    20px; --lh-xl:    28px;
    --fs-2xl:   24px; --lh-2xl:   32px;
    --fs-3xl:   30px; --lh-3xl:   36px;
    --fs-4xl:   36px; --lh-4xl:   40px;

    /* Tight line-height = 100% of the font size (leading-trim NONE in Figma). */
    --lh-none:  1;

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* ─── Spacing — 4px base, matches Tailwind ─────────────────────────── */
    --space-0:    0;
    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;
    --space-16:   64px;

    /* ─── Radius ───────────────────────────────────────────────────────── */
    --radius-sm:    6px;
    --radius-md:    10px;   /* buttons, inputs */
    --radius-lg:    14px;
    --radius-pill:  9999px;

    /* ─── Shadows ──────────────────────────────────────────────────────── */
    --shadow-sm:    0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-md:    0 4px 12px rgba(17, 24, 39, 0.06);
    --shadow-lg:    0 12px 32px rgba(17, 24, 39, 0.10);

    /* ─── Layout sizes ─────────────────────────────────────────────────── */
    --sidebar-width:            240px;
    --sidebar-width-collapsed:  72px;
    --header-height:            64px;
    --container-max:            1200px;
    --icon-size:                20px;
    --nav-item-height:          28px;
    --toolbar-control-height:   42px;
    /* Alerts — period picker geometry. The panel sizes itself to a preset column
       plus two month grids; only the parts that must not move are tokens. */
    --period-preset-width:      150px;
    --calendar-cell-size:       32px;
    --header-alert-button-height:     36px;
    --header-alert-button-padding-y:  9px;
    --header-alert-button-padding-x:  15px;
    --header-alert-button-line-height: 18px;
    --header-alert-button-gap:        10px;
    /* Status popover: five statuses plus their configured sub-statuses can
       exceed the viewport, so the panel scrolls past this height. */
    --status-menu-panel-max-height:   60vh;
    --status-menu-sub-item-indent:    38px;
    /* Violations "group by merchant" nesting: how far a nested violation row's
       checkbox is indented under its merchant header, and the geometry of the
       tree connector that ties the two together. The indent lands the row
       checkbox just right of the merchant checkbox above it (which sits at cell
       padding + chevron + gap = 44px), and must stay inside the grouped
       checkbox column — `table-layout: fixed` will not widen it. */
    --violations-nest-indent:         48px;
    --violations-tree-left:           22px;
    --violations-tree-width:          16px;
    /* Table row-selection controls. Browser-default checkboxes render at ~13px
       and vary by platform; tables need one predictable size. */
    --checkbox-size:                  16px;
    /* Checked/indeterminate fill for row-selection checkboxes specifically —
       deliberately not `--color-primary` itself, which also drives buttons,
       links, and focus rings; a dedicated token lets this scope stay narrow.
       Not used by picker/dropdown checkboxes (searchable-select,
       checklist-select), which keep the brand blue. */
    --checkbox-accent-color:           var(--color-fg-strong);
    /* Sticky section tab bar (Merchant detail): how far an anchored section is
       pushed down so the bar does not cover its heading. Bar height + breathing
       room; keep in step with `.section-tabs` padding. */
    --section-tabs-scroll-offset:     72px;
    /* Read-only profile blocks: the fixed label column, so values line up down
       a column whatever the label length, and the payout card's wrap width. */
    --detail-field-label-width:       132px;
    /* Floor for the value track. The label is fixed-width, so without a floor a
       narrow card leaves the value 0px and `overflow-wrap: anywhere` renders it
       one character per line. */
    --detail-field-value-min:         96px;
    --payout-card-min-width:          280px;
    /* Domain-check hover popover on the Websites table. */
    --domain-popover-max-width:       360px;
    --doc-preview-title-max-width:    420px;
    /* Small switch control (the status modal's "Add custom" reason toggle). */
    --toggle-track-width:             32px;
    --toggle-track-height:            18px;
    --toggle-knob-size:               14px;
    --status-change-select-min-width: 160px;

    /* ─── Motion ───────────────────────────────────────────────────────── */
    --motion-fast:  120ms;
    --motion-base:  200ms;
    --motion-slow:  320ms;
    --easing:       cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Z-index scale ────────────────────────────────────────────────── */
    --z-sidebar:    50;
    --z-header:     60;
    --z-dropdown:   100;
    --z-modal:      200;
    --z-toast:      300;

    /* ─── Drawer / overlay ─────────────────────────────────────────────── */
    --drawer-width:           480px;
    --color-overlay:          rgba(17, 24, 39, 0.4);
    --color-overlay-strong:   rgba(15, 23, 42, 0.92);
    --color-scrim-surface:       rgba(255, 255, 255, 0.12);
    --color-scrim-surface-hover: rgba(255, 255, 255, 0.24);
    --color-required:         #d4183d;
}