/**
 * NWA Food 2026 — Design Tokens
 *
 * Source of truth for the redesign. Values lifted from the design handoff
 * (design_handoff_nwafood_theme/README.md → "Design tokens").
 *
 * Legacy aliases at the bottom map the old NWAFood Lite variable names onto the
 * new palette so the not-yet-reskinned CSS in main.css adopts the new look
 * during the incremental rebuild. As each view is converted these become
 * redundant and can be dropped.
 *
 * @package NWA_Food_2026
 */

:root {
    /* ==========================================================================
       Brand & surfaces
       ========================================================================== */
    --brand-red:       #c8352b;  /* primary actions, accents, rules, active */
    --brand-red-dark:  #a82a22;  /* red button hover */
    --brand-red-tint:  #f6e3e0;  /* success circle, selected sidebar row */
    --salmon:          #e8776d;  /* "red" on dark backgrounds */

    --ink:             #1c1a19;  /* header, footer, dark cards, 2nd buttons */
    --ink-light:       #2c2725;  /* dark tile hover */
    --ink-deep:        #211f1e;  /* footer upper block */

    --page:            #faf8f4;  /* app background */
    --surface:         #ffffff;  /* cards, rows, sidebar */
    --wash:            #efece6;  /* avatar circles, histogram track */

    --star-gold:       #e0a327;  /* ratings */
    --open-green:      #1e7a4d;  /* open-now status */

    /* Text (ink at descending opacity) */
    --text:            #1c1a19;
    --text-72:         rgba(20, 16, 13, .72);  /* body copy */
    --text-62:         rgba(20, 16, 13, .62);
    --text-55:         rgba(20, 16, 13, .55);
    --text-45:         rgba(20, 16, 13, .45);  /* captions */

    /* Borders */
    --border:          rgba(20, 16, 13, .10);
    --border-14:       rgba(20, 16, 13, .14);
    --border-16:       rgba(20, 16, 13, .16);
    --border-18:       rgba(20, 16, 13, .18);

    /* On-dark text */
    --on-dark:         rgba(255, 255, 255, .78);
    --on-dark-72:      rgba(255, 255, 255, .72);
    --on-dark-60:      rgba(255, 255, 255, .60);
    --on-dark-25:      rgba(255, 255, 255, .25);
    --on-dark-09:      rgba(255, 255, 255, .09);

    /* ==========================================================================
       Typography
       ========================================================================== */
    --font-ui:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

    /* Eyebrow helper values */
    --eyebrow-size: 11px;
    --eyebrow-tracking: .13em;

    /* ==========================================================================
       Radii
       ========================================================================== */
    --radius-thumb:  5px;
    --radius-btn:    6px;
    --radius-input:  7px;
    --radius-sm:     8px;
    --radius-card:   10px;
    --radius-dialog: 12px;
    --radius-pill:   999px;

    /* ==========================================================================
       Shadows
       ========================================================================== */
    --shadow-row:    0 6px 18px rgba(20, 16, 13, .09);
    --shadow-card:   0 8px 24px rgba(20, 16, 13, .10);
    --shadow-tile:   0 6px 18px rgba(20, 16, 13, .08);
    --shadow-dialog: 0 30px 70px rgba(0, 0, 0, .40);
    --shadow-toast:  0 12px 34px rgba(0, 0, 0, .30);

    /* ==========================================================================
       Layout
       ========================================================================== */
    --content-max:      1280px;
    --gutter:           32px;
    --sidebar-filters:  246px;
    --sidebar-detail:   336px;
    --measure:          720px;

    /* ==========================================================================
       Motion
       ========================================================================== */
    --transition:      150ms ease;
    --transition-fast: 120ms ease;

    /* ==========================================================================
       Legacy aliases → new palette (kept during incremental reskin)
       ========================================================================== */
    --color-primary:        var(--brand-red);
    --color-primary-dark:   var(--brand-red-dark);
    --color-primary-light:  var(--salmon);

    --color-white:      #ffffff;
    --color-black:      #000000;
    --color-gray-50:    var(--page);
    --color-gray-100:   #f5f3ef;
    --color-gray-200:   var(--wash);
    --color-gray-300:   #d9d5cd;
    --color-gray-400:   #a3a3a3;
    --color-gray-500:   #737373;
    --color-gray-600:   #525252;
    --color-gray-700:   #404040;
    --color-gray-800:   var(--ink);
    --color-gray-900:   #171717;

    --color-success:    var(--open-green);
    --color-error:      var(--brand-red);
    --color-warning:    #f59e0b;

    --color-star-1: var(--star-gold);
    --color-star-2: var(--star-gold);
    --color-star-3: var(--star-gold);
    --color-star-4: var(--star-gold);
    --color-star-5: var(--star-gold);
    --color-star-empty: #d9d5cd;

    --color-background:       var(--surface);
    --color-surface:          var(--page);
    --color-border:           var(--border);
    --color-text:             var(--text);
    --color-text-secondary:   var(--text-62);
    --color-text-muted:       var(--text-45);
    --color-text-inverted:    #ffffff;

    --font-family-heading: var(--font-ui);
    --font-family-body:    var(--font-ui);

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;

    --container-max: var(--content-max);
    --container-padding: var(--gutter);

    --border-radius-sm: var(--radius-thumb);
    --border-radius: var(--radius-sm);
    --border-radius-lg: var(--radius-card);
    --border-radius-xl: 16px;
    --border-radius-full: var(--radius-pill);

    --shadow-sm: 0 1px 2px 0 rgba(20, 16, 13, .05);
    --shadow: var(--shadow-row);
    --shadow-md: var(--shadow-row);
    --shadow-lg: var(--shadow-card);
    --shadow-xl: var(--shadow-card);

    --transition-base: var(--transition);
    --transition-slow: 300ms ease;

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}