/* moco cloud design tokens — the ONLY place colors are defined.
   :root = light mode, [data-theme="dark"] = dark mode. Specs:
   docs/superpowers/specs/2026-07-09-moco-cloud-design-system-design.md
   docs/superpowers/specs/2026-07-10-moco-design-rework-cyan-shell-design.md */
:root {
    color-scheme: light;

    /* Brand — moco cyan (exact palette from the 2026-07-10 rework spec) */
    --moco-primary: #00D4FF;        /* accent: logo, decoration, charts */
    --moco-link: #0899B8;           /* accent-ink: links, icons, active nav */
    --moco-primary-strong: #067F9A; /* filled buttons (>= 4.5:1 with white text) */
    --moco-on-primary: #FFFFFF;
    --moco-primary-tint: #E7F6F9;   /* accent-soft: active/hover surfaces (aus Mockup gemessen 2026-07-10) */

    /* Surfaces */
    --moco-bg: #F4F8FA;
    --moco-surface: #FFFFFF;

    /* Text */
    --moco-text: #2A3843;
    --moco-text-secondary: #7A8C99;
    --moco-divider: #DDE7EC;

    /* Status — always tinted surface + strong text, never solid fills */
    --moco-success: #047857;
    --moco-success-bg: #D1FAE5;
    --moco-warning: #B45309;
    --moco-warning-bg: #FEF3C7;
    --moco-error: #BE123C;
    --moco-error-bg: #FFE4E6;

    /* Counter badges — the ONE sanctioned solid fill (rework spec §1) */
    --moco-badge-bg: #E5484D;
    --moco-badge-text: #FFFFFF;

    /* Shape */
    --moco-radius: 8px;            /* surfaces: cards, dialogs, grids, alerts */
    --moco-radius-control: 6px;    /* controls: buttons, nav links, inputs */
    --moco-shadow: 0 1px 4px rgba(42, 56, 67, .06);
    --moco-backdrop: rgba(13, 27, 32, .5);
}

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

    --moco-link: #4FD8F5;
    --moco-primary-tint: #0E3844;

    --moco-bg: #0D1B20;
    --moco-surface: #13262E;

    --moco-text: #E7F4F8;
    --moco-text-secondary: #8FB0BC;
    --moco-divider: #24444F;

    --moco-success: #34D399;
    --moco-success-bg: rgba(16, 185, 129, .15);
    --moco-warning: #FBBF24;
    --moco-warning-bg: rgba(251, 191, 36, .15);
    --moco-error: #FB7185;
    --moco-error-bg: rgba(251, 113, 133, .15);

    --moco-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    --moco-backdrop: rgba(0, 0, 0, .7);
}