/* ==========================================================================
   Noto Sans — the Guidalia brand font.

   Two-layered so pages work with OR without bundled TTFs:
   1. The @import below loads Noto Sans 400/500/600/700 from Google Fonts
      as a hosted fallback — renders immediately on any machine online.
   2. The @font-face blocks below point at /fonts/NotoSans-*.ttf. Once those
      files exist, the browser prefers the local copy (faster, offline-safe).

   To bundle locally: drop the TTFs listed in fonts/README.md into /fonts.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@font-face { font-family: 'Noto Sans Local'; font-weight: 400; font-style: normal;
  src: url('fonts/NotoSans-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Noto Sans Local'; font-weight: 400; font-style: italic;
  src: url('fonts/NotoSans-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Noto Sans Local'; font-weight: 500; font-style: normal;
  src: url('fonts/NotoSans-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Noto Sans Local'; font-weight: 500; font-style: italic;
  src: url('fonts/NotoSans-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Noto Sans Local'; font-weight: 600; font-style: normal;
  src: url('fonts/NotoSans-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Noto Sans Local'; font-weight: 600; font-style: italic;
  src: url('fonts/NotoSans-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Noto Sans Local'; font-weight: 700; font-style: normal;
  src: url('fonts/NotoSans-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Noto Sans Local'; font-weight: 700; font-style: italic;
  src: url('fonts/NotoSans-BoldItalic.ttf') format('truetype'); font-display: swap; }

/* ==========================================================================
   Guidalia — Colors & Type
   Source of truth: packages/guidalia_core/lib/src/theme/app_theme.dart
   Also informs: signup_screen.dart, home_tab.dart, account_tab.dart
   ==========================================================================
   Guidalia ships a Material 3 *dark* theme, with deep green as the only
   brand chroma. Content is white-on-black; green is reserved for primary
   actions, the logo pin, credit badges and navigation highlights.
   ========================================================================== */

:root {
  /* ---------- Brand color ------------------------------------------------ */
  --g-green-900: #003B22;  /* shadow / pressed */
  --g-green-800: #00522F;
  --g-green-700: #006B40;  /* ★ primary — Color(0xFF006B40) */
  --g-green-600: #097A4E;
  --g-green-500: #1C8A5E;
  --g-green-400: #3EA079;  /* hover on green surfaces */
  --g-green-300: #6FBF9C;
  --g-green-200: #A9DBC3;
  --g-green-100: #DDEFE6;

  /* ---------- Highlight / accent (Material tertiary) --------------------- */
  --g-yellow-500: #FFD54F;  /* ★ highlight — Color(0xFFFFD54F) — used
                               sparingly: star ratings, "BEST VALUE" badge,
                               map heading cone. */

  /* ---------- Neutrals --------------------------------------------------- */
  --g-black:     #000000;   /* ★ scaffold background */
  --g-ink-900:   #0B0B0B;   /* near-black card on black */
  --g-ink-800:   #141414;   /* transaction / credit pack cards */
  --g-ink-700:   #1C1C1E;   /* bottom-nav + app-bar surface */
  --g-ink-600:   #2A2A2C;
  --g-ink-500:   #3A3A3C;
  --g-line:      rgba(255,255,255,0.10);   /* hairlines */
  --g-line-strong: rgba(255,255,255,0.35); /* input borders */

  /* Foregrounds on black (Flutter white / white70 / white54 / white38) */
  --g-fg-1:      #FFFFFF;             /* headlines, primary body   */
  --g-fg-2:      rgba(255,255,255,.70); /* body, subtitles         */
  --g-fg-3:      rgba(255,255,255,.54); /* meta, placeholders      */
  --g-fg-4:      rgba(255,255,255,.38); /* disabled                */

  /* Foregrounds on green */
  --g-on-green:  #FFFFFF;

  /* ---------- Semantic state -------------------------------------------- */
  --g-success:   #4CAF50;   /* snackbar "Welcome, …!"              */
  --g-danger:    #F44336;   /* "Danger zone", sign-in failed       */
  --g-danger-ring: #B3261E; /* outlined Delete account button       */
  --g-warning:   #FFB74D;

  /* ---------- Scrim / overlays ------------------------------------------ */
  --g-scrim-35:  rgba(0,0,0,0.35);  /* signup card fill over video  */
  --g-scrim-55:  rgba(0,0,0,0.55);  /* AudioGuide text protection  */
  --g-scrim-70:  rgba(0,0,0,0.70);  /* bottom status pill          */
  --g-scrim-v-top: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.80) 100%);
  --g-scrim-v-bot: linear-gradient(0deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.80) 100%);

  /* ---------- Spacing (4-pt) -------------------------------------------- */
  --g-sp-1: 4px;
  --g-sp-2: 8px;
  --g-sp-3: 12px;
  --g-sp-4: 16px;  /* default gutter                                     */
  --g-sp-5: 20px;
  --g-sp-6: 24px;  /* screen horizontal padding                          */
  --g-sp-7: 28px;
  --g-sp-8: 32px;
  --g-sp-10: 40px;
  --g-sp-12: 48px;

  /* ---------- Radii — lifted from Flutter widgets ----------------------- */
  --g-radius-xs:   6px;
  --g-radius-sm:  10px;   /* text inputs (OutlineInputBorder .circular(10)) */
  --g-radius-md:  14px;   /* account quick-action cards                     */
  --g-radius-lg:  16px;   /* itinerary + POI cards                          */
  --g-radius-xl:  20px;   /* popup overlays                                 */
  --g-radius-2xl: 24px;   /* bottom-sheet top corners                       */
  --g-radius-pill: 999px; /* every button — StadiumBorder                   */

  /* ---------- Elevation / shadow ---------------------------------------- */
  --g-shadow-card:    0 2px 6px rgba(0,0,0,0.35);
  --g-shadow-float:   0 8px 24px rgba(0,0,0,0.45);
  --g-shadow-pill:    0 1px 2px rgba(0,0,0,0.25);
  --g-ring-focus:     0 0 0 2px rgba(255,255,255,0.6);
  --g-ring-value:     0 0 0 1.5px var(--g-green-700); /* "BEST VALUE" card  */
  --g-glow-value:     0 0 16px rgba(0,107,64,0.55);

  /* ---------- Motion ---------------------------------------------------- */
  --g-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --g-ease-emph:     cubic-bezier(0.3, 0, 0, 1);
  --g-dur-fast:  120ms;
  --g-dur-base:  200ms;
  --g-dur-slow:  320ms;

  /* ---------- Type ------------------------------------------------------ */
  --g-font-sans: 'Noto Sans Local', 'Noto Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --g-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo,
                  Consolas, monospace;

  /* Weights (Noto Sans ships 300/400/500/600/700/800/900) */
  --g-w-regular: 400;
  --g-w-medium:  500;
  --g-w-semi:    600;
  --g-w-bold:    700;
}

/* ==========================================================================
   Base type — dark-first (scaffoldBackgroundColor = Colors.black)
   ========================================================================== */
html, body {
  background: var(--g-black);
  color: var(--g-fg-1);
  font-family: var(--g-font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display (Welcome screen — "Welcome to" 28pt w600) */
.g-display,
.g-h1 {
  font-family: var(--g-font-sans);
  font-size: 28px;
  line-height: 1.15;
  font-weight: var(--g-w-semi);
  letter-spacing: -0.01em;
  color: var(--g-fg-1);
}

/* Section header — home "Nearby itineraries" */
.g-h2 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: var(--g-w-semi);
  letter-spacing: -0.005em;
  color: var(--g-fg-1);
}

/* Card title — "Explore Florence", "Roman Florence" */
.g-h3 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--g-w-semi);
  color: var(--g-fg-1);
}

/* Row / item title */
.g-h4 {
  font-size: 16px;
  line-height: 1.3;
  font-weight: var(--g-w-semi);
  color: var(--g-fg-1);
}

/* Body */
.g-body,
p {
  font-size: 15px;
  line-height: 1.45;
  font-weight: var(--g-w-regular);
  color: var(--g-fg-2);
}

/* Small / meta */
.g-small {
  font-size: 13px;
  line-height: 1.35;
  color: var(--g-fg-3);
}

.g-micro {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--g-w-semi);
  color: var(--g-fg-3);
}

/* Tagline — italic everywhere it appears */
.g-tagline {
  font-size: 16px;
  line-height: 1.3;
  font-style: italic;
  font-weight: var(--g-w-regular);
  color: var(--g-fg-1);
}
.g-tagline--sm { font-size: 14px; }

/* Button label (StadiumBorder, size=16/600 per theme) */
.g-btn-label {
  font-size: 16px;
  font-weight: var(--g-w-semi);
  letter-spacing: 0;
}

/* Mono — ids, credit counts on icons */
code, .g-mono {
  font-family: var(--g-font-mono);
  font-size: 13px;
}

/* ==========================================================================
   Semantic element defaults (use if you aren't using class names)
   ========================================================================== */
h1 { font-size: 28px; font-weight: var(--g-w-semi); line-height: 1.15; }
h2 { font-size: 22px; font-weight: var(--g-w-semi); line-height: 1.2; }
h3 { font-size: 20px; font-weight: var(--g-w-semi); line-height: 1.25; }
h4 { font-size: 16px; font-weight: var(--g-w-semi); line-height: 1.3; }
small { font-size: 13px; color: var(--g-fg-3); }