/* REGARA design tokens.
 *
 * Single source of truth for color across every page. Include this BEFORE
 * any other stylesheet so downstream styles can reference these custom
 * properties. Pages should not redefine these — if a new design need comes
 * up, add it here and use it everywhere.
 */

:root {
    /* ---- Brand palette ---- */
    --navy: #1B3A5A;          /* Primary — Dark Blue */
    --navy-deep: #0F2540;     /* Darker navy for backgrounds / depth */
    --navy-mid: #2d4a6f;      /* Mid navy — used in gradients / decorative fills */
    --indigo: #3D2D5F;        /* Secondary — Deep Indigo-Purple */
    --brand-blue: #1E5BC6;    /* Brand mid-blue — headings & data emphasis */
    --electric: #00C0FF;      /* Accent — Bright Electric Blue */
    --silver: #C9D3E2;        /* Accent — Silver / Light Grey */
    --mint: #A8E6CF;          /* Accent — Light Green */

    /* ---- Semantic state colors ---- */
    --success: #059669;
    --warning: #d97706;
    --error:   #dc2626;
    --danger:  #b91c1c;       /* slightly deeper red for destructive menu items */

    /* ---- State palettes (banner / chip / pill backgrounds and outlines) ----
       Each palette has a soft bg, a medium border, a dark text color, and a
       saturated accent (used for borders-left, dots, icons). Sourced from the
       Tailwind 100/200/500/800 family the codebase already used as literals;
       tokenized so palette changes are a one-file edit. */
    --state-error-bg:     #fee2e2;
    --state-error-border: #fecaca;
    --state-error-text:   #991b1b;
    --state-error-accent: #dc2626;

    --state-warning-bg:     #fef3c7;
    --state-warning-border: #fde68a;
    --state-warning-text:   #92400e;
    --state-warning-accent: #f59e0b;
    --state-warning-bg-soft: #fffbeb;       /* the lightest amber, for notice cards */

    --state-success-bg:     #d1fae5;
    --state-success-border: #a7f3d0;
    --state-success-text:   #065f46;
    --state-success-accent: #10b981;

    --state-info-bg:     #eff6ff;
    --state-info-border: #bfdbfe;
    --state-info-text:   #1e40af;
    --state-info-accent: #3b82f6;

    /* ---- Utility tokens (derived) ---- */
    --ink: var(--navy);       /* main text color */
    --muted: #5A6B7E;         /* secondary / supporting text */
    --line: #E4E8EE;          /* default border */
    --line-soft: #EEF1F5;     /* subtle divider */
    --line-strong: #d1d5db;   /* heavier border (forms, inputs) */
    --bg: #F5F7FA;            /* page background */
    --card: #FFFFFF;          /* surface / card background */

    /* ---- Type scale (rem-based, ~16px root) ----
       Used by shared CSS components. Page-local overrides still exist for
       pages with their own type rhythm; future cleanups should migrate
       those to these tokens too. Values map to actual usage already in
       the codebase, not invented from scratch. */
    --text-xs:    0.7rem;       /* eyebrow labels, type badges, divider tags */
    --text-sm:    0.85rem;      /* small captions, meta rows, pill chips */
    --text-base:  0.95rem;      /* default body, .detail-card__meta-value */
    --text-md:    1rem;         /* default copy */
    --text-lg:    1.2rem;       /* small section headings */
    --text-xl:    1.55rem;      /* card titles (product-card .product-name) */
    --text-2xl:   1.7rem;       /* live-work card headlines */
    --text-3xl:   2.1rem;       /* page-header__title */
    --text-4xl:   2.25rem;      /* detail-card hero name */
}