/* Neutral defaults. A project overrides tokens in its own brand.css, loaded after these panel sheets via
   templates/panel/brand_head.html. Every token below may be overridden; the semantic tokens are defined in
   terms of the palette where they can be, so overriding the palette re-themes most of the panel at once.

   Palette:            --brand-bg, --brand-ink, --brand-primary, --brand-primary-hover, --brand-primary-soft,
                       --brand-secondary, --brand-tertiary, --brand-gradient
   Semantic colours:   --bg, --surface, --surface-sunken, --text, --muted, --border, --border-strong,
                       --border-input, --accent, --accent-hover, --accent-text, --accent-soft, --danger,
                       --danger-hover, --danger-soft, --success, --success-soft, --success-wash, --warning-soft
   Shadows/scrim/focus: --shadow-sm, --shadow-md, --shadow-lg, --scrim, --focus-ring
   Fonts:              --font-display, --font-body

   A dark brand also sets `color-scheme: dark` on :root so native controls follow. After changing any colour,
   run common.panel.contrast.assert_brand_contrast on the brand sheet: it checks the text and border pairs
   against WCAG AA. */
:root {
    color-scheme: light;

    --brand-bg: #f8fafc;
    --brand-ink: #1e293b;
    --brand-primary: #4f46e5;
    --brand-primary-hover: #4338ca;
    --brand-primary-soft: #e0e7ff;
    --brand-secondary: #0e7490;
    --brand-tertiary: #7c3aed;

    --bg: var(--brand-bg);
    --surface: #ffffff;
    --surface-sunken: #f1f5f9;
    --text: var(--brand-ink);
    --muted: #475569;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    --border-input: #64748b;
    --accent: var(--brand-primary);

    --accent-hover: var(--brand-primary-hover);
    --accent-text: #ffffff;
    --accent-soft: var(--brand-primary-soft);

    --danger: #b91c1c;
    --danger-hover: #991b1b;
    --danger-soft: #fee2e2;
    --success: #15803d;
    --success-soft: #dcfce7;
    --success-wash: var(--success-soft);
    --warning-soft: #fef3c7;

    --brand-gradient: linear-gradient(
        135deg,
        var(--brand-secondary) 0%,
        var(--brand-secondary) 15%,
        var(--brand-tertiary) 50%,
        var(--brand-primary) 85%,
        var(--brand-primary) 100%
    );

    --space-0-5: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;

    --leading-tight: 1.2;
    --leading-body: 1.5;

    --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --display-tracking: -0.01em;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.06);
    --shadow-md: 0 6px 20px rgba(30, 41, 59, 0.10);
    --shadow-lg: 0 18px 48px rgba(30, 41, 59, 0.18);

    --scrim: rgba(30, 41, 59, 0.5);

    --z-base: 0;
    --z-raised: 1;
    --z-lifted: 2;
    --z-dropdown: 30;
    --z-sheet: 40;
    --z-overlay: 50;

    --duration-fast: 150ms;
    --duration-slow: 300ms;
    --duration-reveal: 200ms;
    --duration-nudge: 350ms;
    --nudge-distance: 6px;
    --reveal-height: auto;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);

    --duration-spin: 0.8s;

    --focus-ring: 2px solid var(--text);
    --focus-inset-offset: -2px;
    --focus-offset: 2px;
    --border-width: 1px;
    --ring-width: 2px;

    --selection-bar-inset: -2px;
    --selection-underline-offset: 4px;

    --sidebar-width: 244px;
    --sidebar-edge: 4px;

    --card-min-width: 320px;
    --tap-target: 44px;

    --icon-size: 20px;
    --icon-size-sm: 16px;

    --control-height-compact: 36px;
    --control-button-compact: 32px;
    --control-inset: 3px;
    --underline-offset: 3px;
    --row-mark-duration: 2s;

    --checkbox-size: 20px;

    --drop-cue-shadow: inset 0 0 0 var(--ring-width) var(--accent), inset 0 6px 16px var(--scrim);
    --drag-card-min-width: 20rem;
    --lift-tilt: -1deg;
    --position-column-width: 3ch;
    --upload-thumb-size: 96px;
    --progress-height: 8px;
    --menu-min-width: 16rem;
    --dialog-max-width: 32rem;
    --page-measure: 56rem;
    --prose-measure: 65ch;
    --icon-tile-size: 2.25rem;
    --icon-picker-tile-min: 5.5rem;
    --icon-baseline-shift: 0.15em;
    --card-list-max-height: min(24rem, 60dvh);
    --form-measure: 40rem;
    --min-column: 12rem;
    --summary-max-height: min(16rem, 40dvh);
}