/* Municipality16 design tokens — RW minimalist system.
   Flat surfaces, thin borders, restrained shadows. No gradients, no glass.
   Single source of truth for color, spacing, type, motion, shadow.
   Plain CSS custom properties; no build pipeline. */

@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

:root {
    /* ---------- Core RW palette ---------- */
    --rw-navy:        #0c3a58;   /* primary brand, headings, table heads, primary buttons */
    --rw-blue:        #1a5c7a;   /* secondary brand, icons, links, hover */
    --rw-blue-soft:   rgba(26, 92, 122, 0.08);  /* selected / tinted surfaces */
    --rw-blue-border: rgba(26, 92, 122, 0.25);
    --rw-section:     #f8f9fa;   /* section surfaces inside cards */

    /* Legacy brand names — re-pointed to the RW palette (keep names, flat values) */
    --brand-cyan:        #1a5c7a;
    --brand-cyan-dark:   #0c3a58;
    --brand-cyan-soft:   #e7eff4;
    --brand-navy:        #0c3a58;
    --brand-navy-soft:   #1a5c7a;
    --brand-lime:        #28a745;
    --brand-lime-deep:   #1e7e34;
    --brand-coral:       #e97852;
    --brand-coral-soft:  #f39b5c;
    --brand-yellow:      #ffc107;
    --brand-yellow-deep: #e5a923;
    --brand-cream:       #f8f9fa;

    /* ---------- Support / vote semantics ---------- */
    --support-positive:      #28a745;
    --support-positive-deep: #1e7e34;
    --support-negative:      #dc3545;
    --support-negative-deep: #b02a37;
    --support-neutral:       #6c757d;

    /* ---------- Six game areas ---------- */
    --area-culture:    #B14B7E;
    --area-education:  #E97852;
    --area-health:     #5BC0DE;
    --area-infra:      #7B5FA0;
    --area-nature:     #4CAF50;
    --area-sport:      #F4C737;

    /* ---------- Semantic surfaces ---------- */
    --surface-page:        #f8f9fa;
    --surface-page-dark:   #0c3a58;   /* game / projector screens */
    --surface-card:        #ffffff;
    --surface-card-soft:   #f8f9fa;
    --surface-overlay:     rgba(12, 58, 88, 0.60);
    --surface-glass:       #ffffff;   /* legacy name; glass is retired — solid card */

    /* Soft state tints (flat, for status surfaces) */
    --tint-success:    #eaf6ec;
    --tint-danger:     #fdecee;
    --tint-warning:    #fff7e0;
    --tint-info:       #e7eff4;

    /* ---------- Text ---------- */
    --text-primary:    #0c3a58;
    --text-secondary:  #44606f;
    --text-muted:      #6c757d;
    --text-inverse:    #ffffff;
    --text-on-brand:   #ffffff;

    /* ---------- State ---------- */
    --state-success:   #28a745;
    --state-warning:   #ffc107;
    --state-warning-text: #856404;
    --state-danger:    #dc3545;
    --state-info:      #1a5c7a;

    /* ---------- Borders / dividers ---------- */
    --border-subtle:   rgba(12, 58, 88, 0.08);
    --border-default:  rgba(12, 58, 88, 0.15);
    --border-strong:   rgba(12, 58, 88, 0.30);
    --border-focus:    #1a5c7a;

    /* ---------- Spacing (4px grid) ---------- */
    --sp-0:   0;
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:   12px;
    --sp-4:   16px;
    --sp-5:   24px;
    --sp-6:   32px;
    --sp-7:   48px;
    --sp-8:   64px;
    --sp-9:   96px;

    /* ---------- Radii (8–12px; pill reserved for badges/status/values) ---------- */
    --r-xs:    4px;
    --r-sm:    8px;
    --r-md:    10px;
    --r-lg:    12px;
    --r-xl:    12px;
    --r-pill:  999px;

    /* ---------- Shadows (restrained) ---------- */
    --shadow-xs:        0 1px 2px rgba(12, 58, 88, 0.06);
    --shadow-sm:        0 1px 3px rgba(12, 58, 88, 0.10);
    --shadow-md:        0 2px 8px rgba(12, 58, 88, 0.12);
    --shadow-card:      0 1px 3px rgba(12, 58, 88, 0.10);
    --shadow-card-hover:0 2px 8px rgba(12, 58, 88, 0.12);
    --shadow-glow:      0 0 0 3px rgba(26, 92, 122, 0.25);   /* focus ring */
    --shadow-glow-lime: 0 0 0 3px rgba(40, 167, 69, 0.30);

    /* ---------- Focus ---------- */
    --focus-ring:        0 0 0 3px rgba(26, 92, 122, 0.25);
    --focus-ring-danger: 0 0 0 3px rgba(220, 53, 69, 0.25);

    /* ---------- Motion ---------- */
    --dur-instant:  80ms;
    --dur-fast:     120ms;
    --dur-base:     200ms;
    --dur-slow:     320ms;
    --dur-xslow:    480ms;
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---------- Type scale ---------- */
    --font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body:    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    "SFMono-Regular", Menlo, Consolas, monospace;

    --fs-xs:   0.75rem;     /* 12px */
    --fs-sm:   0.875rem;    /* 14px */
    --fs-md:   1rem;        /* 16px */
    --fs-lg:   1.125rem;    /* 18px */
    --fs-xl:   1.375rem;    /* 22px */
    --fs-2xl:  1.75rem;     /* 28px */
    --fs-3xl:  2.25rem;     /* 36px */
    --fs-4xl:  3rem;        /* 48px */
    --fs-display: 4rem;     /* 64px — projector hero */

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-black:     800;

    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-normal: 1.5;

    --tracking-tight:  -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.02em;
    --tracking-wider:  0.06em;

    /* ---------- Touch targets ---------- */
    --tap-min:        48px;
    --tap-comfort:    56px;

    /* ---------- z-index scale ---------- */
    --z-base:         0;
    --z-elevated:     10;
    --z-sticky:       100;
    --z-overlay:      900;
    --z-modal:        1000;
    --z-toast:        1100;
    --z-tooltip:      1200;

    /* ---------- Legacy color aliases (keep until full migration) ---------- */
    --primary-color:               var(--rw-blue);
    --secondary-color:             var(--state-success);
    --color-warning:               var(--state-warning);
    --color-card:                  var(--border-subtle);
    --success-color:               var(--state-success);
    --success-primary:             var(--support-positive-deep);
    --success-tertiary:            var(--state-success);
    --background-colorful-primary: var(--rw-blue);
    --background-colorful-secondary:var(--rw-navy);
    --phase-indicator-primary:     var(--rw-blue);
    --phase-indicator-secondary:   var(--rw-navy);
    --danger-color:                var(--state-danger);
    --button-primary:              var(--rw-navy);
    --button-outline:              var(--rw-blue);
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 0ms;
        --dur-fast:    0ms;
        --dur-base:    0ms;
        --dur-slow:    0ms;
        --dur-xslow:   0ms;
    }
}