/* ==========================================================================
   Daitalens design tokens.
   Lifted verbatim from the Daitalens FE Handbook (#/design/tokens and
   #/design/dark-mode), which mirrors daitalens wwwroot/css/dl-effects.css.
   The help centre wears the same tokens so it reads as Daitalens family.
   NEVER write a raw hex for a surface, border, text colour or brand accent
   in a component stylesheet — add a token here instead.
   ========================================================================== */
:root {
    --dl-primary-rgb: 16, 113, 185;
    --dl-accent-rgb: 79, 202, 255;

    --dl-bg-primary: #F7F9FC;
    --dl-bg-secondary: #EDF2F7;
    --dl-surface: #FFFFFF;
    --dl-surface-sunken: #F7FAFC;

    --dl-text-primary: #1A202C;
    --dl-text-secondary: #4A5568;
    /* Darker than the handbook's #A0AEC0, which is 2.0-2.3:1 on these surfaces and fails
       WCAG AA for the crumbs, hints and help text it colours (ZG-106). #636E80 is at least
       4.58:1 on every light surface here (#EDF2F7 is the darkest), and stays lighter than
       --dl-text-secondary so the hierarchy holds. */
    --dl-text-muted: #636E80;

    --dl-nav-text: #0B3F68;
    --dl-nav-text-muted: #4A7396;

    --dl-success: #38A169;
    --dl-warning: #D69E2E;
    --dl-danger: #E53E3E;

    --dl-border-subtle: rgba(0, 0, 0, 0.06);
    --dl-border-light: rgba(0, 0, 0, 0.10);
    --dl-border-emphasis: rgba(0, 0, 0, 0.16);

    --dl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --dl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --dl-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);

    /* Nunito — Ro's call for the help app (DL-3045).
       Deliberately NOT the product's face: Daitalens itself is on Plus Jakarta Sans
       (DL-2954), and the help centre reads as family without pretending to be the app.
       This token is the only place a family is named; no component names one directly,
       so changing the typeface again stays a one-line edit. */
    --dl-font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dl-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --dl-tracking-tight: -0.02em;
    --dl-tracking-wide: 0.05em;
    --dl-tracking-wider: 0.1em;

    --dl-space-1: 0.25rem;
    --dl-space-2: 0.5rem;
    --dl-space-3: 0.75rem;
    --dl-space-4: 1rem;
    --dl-space-5: 1.25rem;
    --dl-space-6: 1.5rem;
    --dl-space-8: 2rem;

    --dl-radius-sm: 6px;
    --dl-radius-md: 10px;
    --dl-radius-lg: 16px;
    --dl-radius-full: 9999px;

    --dl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dl-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dl-duration-fast: 200ms;
    --dl-duration-normal: 300ms;
}

[data-theme="dark"] {
    --dl-dark-bg: #0f1117;
    --dl-dark-surface: #1a1d27;
    --dl-dark-surface-raised: #222639;
    --dl-dark-surface-overlay: #2a2e3f;
    --dl-dark-border: rgba(255, 255, 255, 0.08);
    --dl-dark-border-light: rgba(255, 255, 255, 0.12);
    --dl-dark-border-emphasis: rgba(255, 255, 255, 0.20);
    --dl-dark-text: #e4e4e7;
    --dl-dark-text-muted: #9ca3af;
    --dl-dark-text-subtle: #6b7280;

    --dl-bg-primary: #0f1117;
    --dl-bg-secondary: #1a1d27;
    --dl-surface: #1a1d27;
    --dl-surface-sunken: #222639;

    --dl-text-primary: #e4e4e7;
    --dl-text-secondary: #9ca3af;
    /* Lighter than the handbook's #6b7280 (2.8-3.9:1 on these surfaces) for the same reason:
       #8e96a5 is at least 4.52:1 on every dark surface here (#2a2e3f is the lightest), and
       stays below --dl-text-secondary (ZG-106). */
    --dl-text-muted: #8e96a5;

    --dl-nav-text: #dbe7f2;
    --dl-nav-text-muted: #8fa8c0;

    --dl-border-subtle: rgba(255, 255, 255, 0.08);
    --dl-border-light: rgba(255, 255, 255, 0.12);
    --dl-border-emphasis: rgba(255, 255, 255, 0.20);

    --dl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --dl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --dl-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
}