/* ---------------------------------------------------------------------------
   Design tokens — wave 0 of the dashboard redesign.

   Every colour, radius, type step and duration the new design uses is declared
   here, once, in both themes. Components read tokens and never hard-code a
   value, so a hue change is one edit here.

   Light values are the approved palette from the design canvas. Dark values are
   the same hues re-lit for a navy ground: the accent and primary move up in
   lightness so they still carry on a dark surface, and every text pair was
   checked to keep its contrast ratio. No new hue is introduced in either theme.

   The app's own dark mode is `body.dark-only` (the theme's switch), so that is
   the selector the dark set hangs off, not prefers-color-scheme.
   --------------------------------------------------------------------------- */
:root {
    /* brand */
    --dt-primary: #0284C7;
    --dt-primary-soft: #E0F2FE;
    --dt-secondary: #0369A1;
    --dt-secondary-soft: #DBEAFE;
    --dt-accent: #0EA5E9;
    --dt-accent-soft: #E0F7FE;

    /* semantic — amber carries every attention state, red is never used */
    --dt-good: #16A34A;
    --dt-good-soft: #DCFCE7;
    --dt-good-ink: #166534;
    --dt-warn: #B45309;
    --dt-warn-soft: #FDF1E3;
    --dt-warn-ink: #7C3A0A;
    --dt-pending: #64748B;
    --dt-pending-stripe: #94A3B8;
    --dt-pending-soft: #F1F5F9;

    /* ink and ground */
    --dt-ink: #0F172A;
    --dt-ink-body: #334155;
    --dt-ink-muted: #64748B;
    --dt-ink-on-tint: #475569;
    --dt-paper: #FBFDFF;
    --dt-panel: #FFFFFF;
    --dt-panel-2: #F8FBFE;
    --dt-tint: #F1F5F9;
    --dt-line: rgba(15, 23, 42, 0.08);
    --dt-line-strong: rgba(15, 23, 42, 0.14);
    --dt-scroll-thumb: rgba(15, 23, 42, 0.22);
    --dt-scroll-thumb-hover: rgba(15, 23, 42, 0.38);

    /* the navigation rail keeps its own ground in both themes */
    --dt-side-bg: #0B1E36;
    --dt-side-text: rgba(255, 255, 255, 0.68);
    --dt-side-text-dim: rgba(255, 255, 255, 0.55);
    --dt-side-active: #0369A1;   /* white on #0284C7 is 4.1:1 and fails */
    --dt-side-ring: #0EA5E9;

    /* elevation */
    --dt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --dt-shadow-card: 0 16px 36px rgba(15, 23, 42, 0.05);
    /* the panel lift. Light: the canvas's blue-tinted shadow. Dark: it must NOT be a blue
       glow — on a near-black ground it reads as a light band above the panel. */
    --dt-shadow-panel: 0 16px 40px rgba(2, 132, 199, 0.08);
    /* the drop zone's tint, the first stop of its gradient. Declared per theme: a light
       literal here would stay light in the dark theme and read as a light band. */
    --dt-zone-tint: rgba(224, 242, 254, 0.75);
    --dt-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --dt-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.14);
    --dt-scrim: rgba(15, 23, 42, 0.5);

    /* geometry */
    --dt-r-sm: 8px;
    --dt-r: 12px;
    --dt-r-md: 14px;
    --dt-r-lg: 16px;
    --dt-r-xl: 20px;
    --dt-r-pill: 999px;

    /* type — 12px is the floor for anything readable, 11px only inside pills */
    --dt-font-heading: "Plus Jakarta Sans", "Outfit", system-ui, sans-serif;
    --dt-font-body: "Inter", "Outfit", system-ui, sans-serif;
    --dt-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    --dt-t-pill: 11px;
    --dt-t-xs: 12px;
    --dt-t-sm: 13px;
    --dt-t-base: 14px;
    --dt-t-md: 15px;
    --dt-t-lg: 17px;
    --dt-t-xl: 20px;
    --dt-t-2xl: 26px;

    /* motion */
    --dt-dur-enter: 200ms;
    --dt-dur-exit: 140ms;
    /* a layout move — something changing place or size — needs longer than a fade
       to stay legible, and shorter than ~300ms to stay out of the way */
    --dt-dur-move: 260ms;
    --dt-dur-press: 90ms;
    --dt-ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dt-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* focus — 2px ring, 2px offset, on every interactive element */
    --dt-ring: var(--dt-secondary);
    --dt-ring-width: 2px;
    --dt-ring-offset: 2px;
}

body.dark-only {
    --dt-primary: #38BDF8;
    --dt-primary-soft: #12314C;
    --dt-secondary: #7DD3FC;
    --dt-secondary-soft: #10293F;
    --dt-accent: #0EA5E9;
    --dt-accent-soft: #0E2A40;

    --dt-good: #4ADE80;
    --dt-good-soft: #10301F;
    --dt-good-ink: #86EFAC;
    --dt-warn: #FBBF24;
    --dt-warn-soft: #33240F;
    --dt-warn-ink: #FCD9A0;
    --dt-pending: #94A3B8;
    --dt-pending-stripe: #64748B;
    --dt-pending-soft: #16293C;

    --dt-ink: #F1F5F9;
    --dt-ink-body: rgba(255, 255, 255, 0.80);
    --dt-ink-muted: rgba(255, 255, 255, 0.62);
    --dt-ink-on-tint: rgba(255, 255, 255, 0.72);
    --dt-paper: #0A1929;
    --dt-panel: #10243A;
    --dt-panel-2: #142B44;
    --dt-tint: #16304A;
    --dt-line: rgba(255, 255, 255, 0.12);
    --dt-line-strong: rgba(255, 255, 255, 0.20);
    --dt-scroll-thumb: rgba(255, 255, 255, 0.22);
    --dt-scroll-thumb-hover: rgba(255, 255, 255, 0.40);

    --dt-side-bg: #061423;
    --dt-side-text: rgba(255, 255, 255, 0.66);
    --dt-side-text-dim: rgba(255, 255, 255, 0.52);
    --dt-side-active: #0369A1;
    --dt-side-ring: #38BDF8;

    --dt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36);
    --dt-shadow-card: 0 16px 36px rgba(0, 0, 0, 0.40);
    --dt-shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.40);
    --dt-zone-tint: rgba(2, 132, 199, 0.16);
    --dt-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
    --dt-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.52);
    --dt-scrim: rgba(3, 10, 18, 0.62);

    /* on a dark ground the solid-fill token flips: text on it must be dark */
    --dt-ring: #38BDF8;
}

/* Solid fills carry white text in the light theme and dark text in the dark
   theme. Components use these two instead of picking a text colour themselves. */
:root {
    --dt-on-solid: #FFFFFF;
    --dt-solid: var(--dt-secondary);
}
body.dark-only {
    --dt-on-solid: #06121F;
    --dt-solid: var(--dt-primary);
}