/* ==========================================================================
   TASTE OF MACAU — Design Tokens
   Binance-inspired system adapted for a food discovery platform
   ========================================================================== */

:root {
  /* ── Brand: Macau Portuguese street-name tiles ── */
  --color-street-blue:    #0F4E96;
  --color-street-blue-2:  #1B67AD;
  --color-azulejo-blue:   #DDEDF8;
  --color-tile-white:     #FAF8F0;
  --color-porcelain:      #F5FAFC;
  --color-terracotta:     #B45A3E;

  --color-gold:           var(--color-street-blue);
  --color-gold-light:     var(--color-street-blue-2);
  --color-gold-dark:      #0A3A73;
  --color-gold-subtle:    rgba(15, 78, 150, 0.10);
  --color-gold-hover:     rgba(15, 78, 150, 0.15);
  --color-gold-muted:     rgba(15, 78, 150, 0.12);
  --color-gold-border:    rgba(15, 78, 150, 0.24);

  /* ── Dark surfaces ── */
  --color-macau-dark:     #0B2D5C;
  --color-dark-card:      #123F78;
  --color-dark-border:    rgba(255, 255, 255, 0.08);
  --color-dark-border-md: rgba(255, 255, 255, 0.12);

  /* ── Ink / text on dark ── */
  --color-ink:            #06234A;

  /* ── Light surfaces ── */
  --color-surface-white:  var(--color-tile-white);
  --color-snow:           var(--color-porcelain);
  --color-surface:        var(--color-tile-white);
  --color-surface-raised: #FFFCF5;

  /* ── Text ── */
  --color-text-primary:   #08234A;
  --color-text-secondary: #244563;
  --color-slate:          #64788D;
  --color-text-muted:     #64788D;
  --color-text-inverse:   #FAF8F0;
  --color-text-gold:      var(--color-street-blue);

  /* ── Borders ── */
  --color-border-light:   #D9E6EF;
  --color-border:         #CBDDEB;
  --color-border-focus:   var(--color-street-blue);

  /* ── Semantic ── */
  --color-success:        #147A5C;
  --color-success-bg:     rgba(20, 122, 92, 0.08);
  --color-success-border: rgba(20, 122, 92, 0.24);
  --color-error:          var(--color-terracotta);
  --color-error-bg:       rgba(180, 90, 62, 0.09);
  --color-error-border:   rgba(180, 90, 62, 0.28);
  --color-info:           var(--color-street-blue);
  --color-info-bg:        rgba(15, 78, 150, 0.08);
  --color-info-border:    rgba(15, 78, 150, 0.24);
  --color-warning:        #A9721B;
  --color-warning-bg:     rgba(169, 114, 27, 0.08);
  --color-warning-border: rgba(169, 114, 27, 0.24);

  /* Legacy aliases — keep for backward compat with existing PHP views */
  --color-primary:        var(--color-gold);
  --color-primary-dark:   var(--color-gold-dark);
  --color-primary-light:  var(--color-gold-light);
  --color-primary-muted:  var(--color-gold-muted);
  --color-secondary:      var(--color-macau-dark);
  --color-secondary-dark: #061F42;
  --color-secondary-light:#123F78;
  --color-secondary-muted:rgba(15, 78, 150, 0.10);
  --color-accent:         var(--color-gold);
  --color-accent-dark:    var(--color-gold-dark);
  --color-accent-light:   var(--color-gold-light);
  --color-accent-muted:   var(--color-gold-muted);
  --color-bg:             var(--color-surface-white);
  --color-bg-alt:         var(--color-snow);
  --color-text:           var(--color-text-primary);
  --color-text-muted:     var(--color-slate);
  --color-text-faint:     #A2B3C4;
  --color-border-accent:  var(--color-gold-border);

  /* ── Typography ── */
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif;
  --font-chinese: "Microsoft JhengHei", "Microsoft YaHei", "PingFang TC", "PingFang SC", system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Binance-scale type sizes */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.125rem;   /* 34px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3.75rem;    /* 60px */

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* ── Spacing (8px base unit) ── */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Legacy aliases */
  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-8);
  --space-2xl: var(--space-12);

  /* ── Border Radius ── */
  --radius-xs:   1px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* ── Shadows (5% opacity system) ── */
  --shadow-xs:     0 1px 2px rgba(32, 32, 37, 0.05);
  --shadow-sm:     0 1px 4px rgba(32, 32, 37, 0.05), 0 1px 2px rgba(32, 32, 37, 0.04);
  --shadow-md:     0 3px 8px rgba(32, 32, 37, 0.05), 0 1px 3px rgba(32, 32, 37, 0.04);
  --shadow-lg:     0 6px 16px rgba(32, 32, 37, 0.05), 0 2px 6px rgba(32, 32, 37, 0.04);
  --shadow-xl:     0 12px 28px rgba(32, 32, 37, 0.05), 0 4px 10px rgba(32, 32, 37, 0.04);
  --shadow-pill:   0 4px 14px rgba(15, 78, 150, 0.20);
  --shadow-heavy:  0 20px 40px rgba(32, 32, 37, 0.10), 0 8px 16px rgba(32, 32, 37, 0.06);
  --shadow-inner:  inset 0 1px 3px rgba(32, 32, 37, 0.06);
  --shadow-focus:  0 0 0 3px rgba(15, 78, 150, 0.26);
  --shadow-card-hover: 0 6px 20px rgba(32, 32, 37, 0.08), 0 2px 8px rgba(32, 32, 37, 0.05);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;

  --transition-base:      all var(--duration-base) var(--ease-out);
  --transition-fast:      all var(--duration-fast) var(--ease-out);
  --transition-color:     color var(--duration-base) var(--ease-out),
                          background-color var(--duration-base) var(--ease-out),
                          border-color var(--duration-base) var(--ease-out);
  --transition-shadow:    box-shadow var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);

  /* ── Z-Index Layers ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-nav:       100;
  --z-sticky:    100;
  --z-overlay:   150;
  --z-modal:     200;
  --z-toast:     300;
  --z-tooltip:   400;
  --z-explore-backdrop: 820;
  --z-explore-results:  830;
  --z-explore-drawer:   840;
  --z-explore-filter:   850;
  --z-explore-search:   860;
  --z-nav-popover:      1200;
  --z-feedback-backdrop: 1800;
  --z-feedback-modal:   1810;

  /* ── Layout ── */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --container-px:      1.5rem;
  --navbar-height:     64px;
  --nav-height:        64px;
  --sidebar-width:     240px;
  --map-panel-width:   40%;
  --grid-panel-width:  60%;
  --touch-min:         44px;
}