/* Immocierge — Design Tokens
 *
 * Single source of truth for color, typography, radii, shadows.
 * Loaded BEFORE app.css. Components reference tokens, not hex.
 */

:root {
    /* ── 1.1 Surfaces (paper) ──────────────────────────────────── */
    --cream:   #f7f5f0;   /* page background (main area) */
    --cream-2: #f0ede4;   /* secondary surface, nav active bg */
    --cream-3: #e6e2d4;   /* tab-bar bg, chips, tertiary */
    --paper:   #fbfaf5;   /* row hover */
    --white:   #ffffff;   /* cards, sidebar bg, inputs */

    /* ── 1.2 Brand (burgund/magenta — primary surface + active) ─── */
    --forest:      #86015b;   /* primary button, brand-mark, active indicator */
    --forest-2:    #6e014b;   /* primary hover */
    --forest-3:    #56013a;   /* primary active / strong border */
    --forest-tint: #a02b79;   /* lighter accent on dark */
    --forest-soft: #b85b96;   /* softest tint */

    /* ── 1.3 Accent (ocher) ────────────────────────────────────── */
    --gold:      #b88a2e;     /* form focus, secondary accent */
    --gold-2:    #9c7424;     /* accent text on light bg (pills, chips) */
    --gold-soft: #e8c87a;     /* accent on dark surfaces */

    /* ── 1.4 Status / functional ──────────────────────────────── */
    --pos:        #2f6b3e;    /* income, positive, "rented" */
    --neg:        #a83f1f;    /* expenses, negative, dunning */
    --terra:      #a83f1f;    /* alias of --neg, warning chips */
    --terra-soft: #e8b59a;    /* warning pill bg */

    /* ── 1.5 Text ──────────────────────────────────────────────── */
    --ink:     #14171c;       /* primary text, headings */
    --ink-2:   #232830;       /* body */
    --ink-3:   #4a5260;       /* secondary, breadcrumbs */
    --muted:   #7d8593;       /* labels, captions */
    --muted-2: #a8afba;       /* tertiary, disabled, dot seps */

    /* ── 1.6 Lines ─────────────────────────────────────────────── */
    --line:   #e2dfd4;        /* default border */
    --line-2: #d4d0c1;        /* stronger (tab outline) */
    --line-3: #eeebde;        /* soft separator inside cards */

    /* ── 1.7 Radii ─────────────────────────────────────────────── */
    --r-pill:   999px;
    --r-card:   14px;
    --r-input:  10px;

    /* ── 1.8 Shadows ───────────────────────────────────────────── */
    --shadow-card:
        0 1px 0 rgba(20,23,28,0.04),
        0 4px 12px rgba(20,23,28,0.06);
    --shadow-pop:
        0 1px 0 rgba(20,23,28,0.04),
        0 12px 32px rgba(20,23,28,0.14);

    /* ── 1.9 Type ──────────────────────────────────────────────── */
    --font-display: "Instrument Serif", Georgia, serif;
    --font-sans:    "Instrument Sans", "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

    /* ── Layout ────────────────────────────────────────────────── */
    --sidebar-w: 248px;
    --topbar-h:  56px;

    /* ──────────────────────────────────────────────────────────── *
     *   LEGACY ALIASES — referenced by older blocks in app.css.
     *   Do not add new ones. New code should use the canonical
     *   tokens above. These will be removed once app.css is fully
     *   migrated.
     * ──────────────────────────────────────────────────────────── */
    --bg:                var(--cream);
    --bg-sidebar:        var(--white);
    --bg-card:           var(--white);
    --bg-input:          var(--cream-2);
    --text:              var(--ink-2);
    --text-secondary:    var(--ink-3);
    --text-muted:        var(--muted);
    --border:            var(--line);
    --border-strong:     var(--line-2);
    --accent:            var(--forest);
    --accent-hover:      var(--forest-2);
    --accent-soft:       rgba(134,1,91,0.08);
    --brand:             var(--gold);
    --brand-soft:        rgba(184,138,46,0.12);
    --radius-sm:         var(--r-input);
    --radius-md:         var(--r-card);
    --radius-xs:         8px;
    --shadow-sm:         var(--shadow-card);
    --shadow-md:         var(--shadow-pop);
}