/* ==========================================================================
   Codly design tokens: shared by the public website and the /core app.
   Served at /css/codly-tokens.css.

   Colours are stored as space-separated RGB channels so they work both as
   rgb(var(--x)) in plain CSS and with Tailwind opacity modifiers
   (e.g. bg-surface/80).

   Theme switching: add class "dark" to <html> (the app's existing mechanism,
   saved in localStorage "ca_theme"). Light is the default.
   ========================================================================== */

:root {
    /* ── Brand scales ────────────────────────────────────────────────────── */
    /* Blue #087DBB: technology, AI, icons, primary actions */
    --brand-50:  238 248 253;
    --brand-100: 214 238 249;
    --brand-200: 173 220 242;
    --brand-300: 116 195 232;
    --brand-400: 52 163 216;
    --brand-500: 18 144 204;
    --brand-600: 8 125 187;     /* #087DBB */
    --brand-700: 7 103 154;
    --brand-800: 10 85 126;
    --brand-900: 14 71 105;
    --brand-950: 10 45 69;

    /* Deep Navy #102F59: secondary backgrounds, nav, headings */
    --navy-50:  241 245 250;
    --navy-100: 225 233 243;
    --navy-200: 195 210 230;
    --navy-300: 150 176 210;
    --navy-400: 98 134 184;
    --navy-500: 64 103 158;
    --navy-600: 47 81 133;
    --navy-700: 38 66 109;
    --navy-800: 27 55 96;
    --navy-900: 16 47 89;       /* #102F59 */
    --navy-950: 10 29 56;

    /* Orange #F39216: highlights and CTAs. Use navy/black text on it,
       never white (white on orange is 2.3:1). For orange text on light
       backgrounds use accent-700. */
    --accent-50:  254 247 236;
    --accent-100: 253 235 207;
    --accent-200: 250 211 157;
    --accent-300: 247 182 94;
    --accent-400: 245 162 58;
    --accent-500: 243 146 22;   /* #F39216 */
    --accent-600: 215 118 11;
    --accent-700: 178 88 13;
    --accent-800: 144 69 18;
    --accent-900: 118 58 18;
    --accent-950: 68 28 5;

    /* ── Semantic tokens (light) ─────────────────────────────────────────── */
    --c-bg:            246 248 251;   /* page background */
    --c-surface:       255 255 255;   /* cards, panels, inputs */
    --c-surface-2:     241 244 248;   /* subtle fills, table headers, hovers */
    --c-surface-3:     229 234 241;   /* pressed / selected */
    --c-border:        227 232 239;
    --c-border-strong: 203 212 225;

    --c-text:          11 27 51;      /* headings & body, 17:1 on white */
    --c-text-muted:    74 91 115;     /* secondary text, 6.9:1 */
    --c-text-subtle:   94 110 133;    /* captions, placeholders, 5.0:1 */
    --c-text-inverse:  255 255 255;

    --c-primary:       var(--brand-600);
    --c-primary-hover: var(--brand-700);
    --c-primary-soft:  var(--brand-50);
    --c-primary-text:  var(--brand-700); /* links / blue text on light */
    --c-on-primary:    255 255 255;

    --c-accent:        var(--accent-500);
    --c-accent-hover:  var(--accent-400);
    --c-accent-soft:   var(--accent-50);
    --c-accent-text:   var(--accent-700);
    --c-on-accent:     var(--navy-950);

    /* Status colours: only for meaning (filed / due soon / overdue / info) */
    --c-success:       4 120 87;
    --c-success-soft:  236 253 245;
    --c-warning:       180 83 9;
    --c-warning-soft:  255 251 235;
    --c-danger:        190 18 60;
    --c-danger-soft:   255 241 242;
    --c-info:          var(--brand-700);
    --c-info-soft:     var(--brand-50);

    /* Sidebar / app chrome: deep navy in light mode */
    --c-nav-bg:        var(--navy-900);
    --c-nav-hover:     27 63 112;
    --c-nav-active:    var(--brand-600);
    --c-nav-text:      184 199 221;
    --c-nav-text-strong: 255 255 255;
    --c-nav-border:    255 255 255;   /* used at low alpha */

    --c-ring:          var(--brand-500);
    --c-overlay:       10 29 56;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --c-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --c-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --c-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Shape & depth ───────────────────────────────────────────────────── */
    --c-radius-sm: 6px;
    --c-radius-md: 8px;
    --c-radius-lg: 12px;
    --c-radius-xl: 16px;

    --c-shadow-xs: 0 1px 2px rgb(16 47 89 / 0.06);
    --c-shadow-sm: 0 1px 3px rgb(16 47 89 / 0.08), 0 1px 2px rgb(16 47 89 / 0.04);
    --c-shadow-md: 0 4px 12px -2px rgb(16 47 89 / 0.10), 0 2px 4px -2px rgb(16 47 89 / 0.06);
    --c-shadow-lg: 0 16px 32px -8px rgb(16 47 89 / 0.16), 0 4px 8px -4px rgb(16 47 89 / 0.08);

    color-scheme: light;
}

/* ── Premium dark theme (black) ──────────────────────────────────────────── */
/* Screen only: printed pages (certificates, invoices) always use the light palette. */
@media screen {
    html.dark {
        --c-bg:            0 0 0;
        --c-surface:       12 16 23;
        --c-surface-2:     19 25 35;
        --c-surface-3:     28 36 50;
        --c-border:        33 41 56;
        --c-border-strong: 52 63 82;

        --c-text:          245 247 250;
        --c-text-muted:    154 168 188;   /* 7.8:1 on surface */
        --c-text-subtle:   138 152 173;   /* ≥4.5:1 on dark surfaces and tinted panels */
        --c-text-inverse:  11 27 51;

        --c-primary:       var(--brand-600);   /* white text needs ≥4.5:1 */
        --c-primary-hover: var(--brand-700);
        --c-primary-soft:  8 40 61;
        --c-primary-text:  var(--brand-400);  /* 7.4:1 on black */
        --c-on-primary:    255 255 255;

        --c-accent:        var(--accent-500);
        --c-accent-hover:  var(--accent-400);
        --c-accent-soft:   46 28 6;
        --c-accent-text:   var(--accent-400);
        --c-on-accent:     0 0 0;

        --c-success:       52 211 153;
        --c-success-soft:  6 38 29;
        --c-warning:       251 191 36;
        --c-warning-soft:  45 32 6;
        --c-danger:        251 113 133;
        --c-danger-soft:   50 10 20;
        --c-info:          var(--brand-400);
        --c-info-soft:     8 40 61;

        --c-nav-bg:        0 0 0;
        --c-nav-hover:     19 25 35;
        --c-nav-active:    var(--brand-600);
        --c-nav-text:      154 168 188;
        --c-nav-text-strong: 255 255 255;
        --c-nav-border:    255 255 255;

        --c-ring:          var(--brand-400);
        --c-overlay:       0 0 0;

        --c-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.5);
        --c-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.6);
        --c-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.7);
        --c-shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.8);

        color-scheme: dark;
    }
}