/**
 * FindMyTap Design System — Colors & Typography
 * "Warm Craft" — cervejaria artesanal à noite. Escuro e quente, nunca frio ou cinza.
 * Dark mode only.
 * Source: app/lib/core/design/tokens/app_warm_palette.dart
 *
 * Usage:
 *   @import url('colors_and_type.css');
 *   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@400;700&display=swap');
 */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@400;700&display=swap');

:root {
  /* ─── Color Tokens ───────────────────────────────────────── */

  /* Primary — gold1 / gold2 */
  --color-primary:            #FFB300;  /* gold1 */
  --color-on-primary:         #2A1D08;
  --color-primary-container:  #F5B638;  /* gold2 */
  --color-on-primary-container: #2A1D08;
  --color-gold-soft:          rgba(245, 182, 56, 0.14);
  --color-gold-line:          rgba(245, 182, 56, 0.35);

  /* Secondary — coral / coral soft */
  --color-secondary:          #F5935A;  /* coralSoft */
  --color-on-secondary:       #2A1D08;
  --color-secondary-container: #F07C3A; /* coral */
  --color-on-secondary-container: #2A1D08;

  /* Status */
  --color-success:            #22C55E;

  /* Error */
  --color-error:              #FFB4AB;
  --color-on-error:           #690005;
  --color-error-container:    #93000A;
  --color-on-error-container: #FFDAD6;

  /* Surface stack — deepest to highest (Warm Craft) */
  --color-surface-container-lowest:  #050403;
  --color-surface:                   #0A0907;
  --color-surface-dim:               #0A0907;
  --color-surface-container-low:     #120E0B;
  --color-surface-container:         #16110D;
  --color-surface-container-high:    #1A1613;
  --color-surface-container-highest: #221D18;
  --color-surface-variant:           #221D18;
  --color-surface-bright:            #2E2823;

  /* On-surface */
  --color-on-surface:         #F5EFE6;  /* text1 */
  --color-on-surface-variant: #E8D9C4;  /* textWarm */

  /* Outline */
  --color-outline:            #9E8E78;
  --color-outline-variant:    #3A3028;

  /* Inverse */
  --color-inverse-surface:    #F5EFE6;
  --color-inverse-on-surface: #2F3133;
  --color-inverse-primary:    #7E5700;

  /* ─── Semantic Aliases ───────────────────────────────────── */
  --bg:           var(--color-surface);
  --bg-low:       var(--color-surface-container-low);
  --bg-card:      var(--color-surface-container-high);
  --bg-input:     var(--color-surface-container-highest);
  --bg-deep:      var(--color-surface-container-lowest);

  --fg:           var(--color-on-surface);
  --fg-muted:     var(--color-on-surface-variant);
  --fg-hint:      var(--color-outline);

  --accent:       var(--color-primary);
  --accent-on:    var(--color-on-primary);
  --accent-fill:  var(--color-primary-container);

  --chip-active:  var(--color-secondary-container);
  --chip-text:    var(--color-on-secondary);

  --tag-teal:     var(--color-tertiary);
  --border-ghost: rgba(81, 69, 50, 0.15);   /* outlineVariant at 15% */
  --border-focus: var(--color-primary);

  /* ─── Typography Tokens ──────────────────────────────────── */
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body:     'Manrope', sans-serif;
  --font-label:    'Manrope', sans-serif;
  --font-brand:    'Montserrat', sans-serif;

  /* Scale */
  --text-display-lg:  40px;   /* SpaceGrotesk Bold — hero titles */
  --text-display-md:  30px;   /* Montserrat Black — logo "FindMyTAP" */
  --text-headline-lg: 24px;   /* SpaceGrotesk Bold — section headers */
  --text-headline-md: 20px;   /* SpaceGrotesk Bold — sub-sections, AppBar */
  --text-headline-sm: 18px;   /* SpaceGrotesk SemiBold — smaller titles */
  --text-body-lg:     16px;   /* Manrope Medium — main body */
  --text-body-md:     14px;   /* Manrope Medium — secondary body */
  --text-body-sm:     12px;   /* Manrope Medium — hints, metadata */
  --text-label-lg:    14px;   /* Manrope SemiBold — form labels */
  --text-label-md:    13px;   /* Manrope SemiBold — button text, links */
  --text-label-sm:    10px;   /* Manrope SemiBold — nav tabs, section tags */
  --text-overline:    11px;   /* Manrope Bold UPPERCASE — section overlines */

  /* ─── Spacing ────────────────────────────────────────────── */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  40px;
  --space-xxxl: 48px;

  /* ─── Border Radius ──────────────────────────────────────── */
  --radius-xs:   4px;    /* inputs, compact tags */
  --radius-sm:   6px;    /* buttons, chips */
  --radius-md:   8px;    /* small cards, secondary containers */
  --radius-lg:   12px;   /* featured cards, icon containers */
  --radius-xl:   16px;   /* large cards, bottom nav, panels */
  --radius-full: 999px;  /* pills, avatars, status tags */

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-low:    0 2px 8px rgba(0,0,0,0.4);
  --shadow-medium: 0 16px 32px rgba(0,0,0,0.5);
  --shadow-bottom-nav: 0 -4px 24px rgba(0,0,0,0.5);
  --shadow-glow-amber: 0 0 16px rgba(245,182,56,0.3);
}

/* ─── Semantic text styles ───────────────────────────────────── */
.display-lg {
  font-family: var(--font-headline);
  font-size: var(--text-display-lg);
  font-weight: 700;
  color: var(--fg);
}
.display-md {
  font-family: var(--font-brand);
  font-size: var(--text-display-md);
  font-weight: 900;
  color: var(--fg);
}
.headline-lg {
  font-family: var(--font-headline);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  color: var(--fg);
}
.headline-md {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 700;
  color: var(--fg);
}
.headline-sm {
  font-family: var(--font-headline);
  font-size: var(--text-headline-sm);
  font-weight: 600;
  color: var(--fg);
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--fg);
}
.body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 500;
  color: var(--fg);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--fg-muted);
}
.label-lg {
  font-family: var(--font-label);
  font-size: var(--text-label-lg);
  font-weight: 600;
  color: var(--fg);
}
.label-md {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--fg);
}
.label-sm {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 600;
  color: var(--fg-hint);
}
.overline {
  font-family: var(--font-label);
  font-size: var(--text-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-hint);
}