/* ==========================================================================
   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  (Guidalia Tickets — LIGHT theme)
   Source of truth: packages/guidalia_core/lib/src/theme/app_theme.dart
   Also informs: signup_screen.dart, home_tab.dart, account_tab.dart
   ==========================================================================
   The Guidalia app ships a Material 3 *dark* theme, but the Guidalia Tickets
   web console is a bright point-of-sale surface: content is dark-on-light and
   deep green is the only brand chroma — reserved for primary actions, selected
   states, badges and navigation highlights. This file re-themes the shared
   token set to light while KEEPING every token name, so the existing g-/cs-/
   feature classes flip automatically.
   ========================================================================== */

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

  /* ---------- Highlight / accent (Material tertiary) --------------------- */
  --g-yellow-500: #FFD54F;  /* ★ highlight — star ratings, "BEST VALUE" badge */

  /* ---------- Surfaces (light) ------------------------------------------ */
  --g-bg:        #F6F7F8;   /* ★ page background (scaffold) */
  --g-surface:   #FFFFFF;   /* card / header / footer surface */
  --g-surface-2: #F0F2F4;   /* secondary surface (chips, subtle fills) */
  --g-border:    #E5E7EB;   /* borders on white */

  /* ---------- Neutrals ---------------------------------------------------
     Legacy dark names remapped to light so any component still referencing
     them renders correctly. --g-black is the scaffold → now the page bg;
     the ink "surface" scale climbs from white toward light greys. */
  --g-black:     var(--g-bg);   /* ★ scaffold background (was #000) */
  --g-ink-900:   #FFFFFF;       /* top card surface (was near-black) */
  --g-ink-800:   #FFFFFF;       /* cards */
  --g-ink-700:   #FFFFFF;       /* app-bar / top-bar surface */
  --g-ink-600:   #F0F2F4;       /* subtle raised fill */
  --g-ink-500:   #F0F2F4;       /* secondary button fill */
  --g-ink-400:   #E5E7EB;       /* secondary button hover */
  --g-ink-200:   #E5E7EB;       /* menu border */
  --g-ink-100:   #F3F4F6;       /* menu-item hover */
  --g-bg-1:      #FFFFFF;       /* popover surface */
  --g-line:      #E5E7EB;                 /* hairlines (was white 10%) */
  --g-line-strong: #D1D5DB;               /* input borders (was white 35%) */

  /* Foregrounds — dark-on-light */
  --g-fg-1:      #111827;   /* headlines, primary body   */
  --g-fg-2:      #4B5563;   /* body, subtitles           */
  --g-fg-3:      #6B7280;   /* meta, placeholders        */
  --g-fg-4:      #9CA3AF;   /* disabled                  */

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

  /* ---------- Semantic state -------------------------------------------- */
  --g-success:   #15803D;   /* success text on light                */
  --g-danger:    #DC2626;   /* errors, sign-in failed               */
  --g-red-500:   #DC2626;   /* void / delete accents                */
  --g-danger-ring: #B3261E; /* outlined Delete button                */
  --g-warning:   #B45309;   /* warning text on light                */

  /* ---------- Scrim / overlays ------------------------------------------ */
  --g-scrim-35:  rgba(0,0,0,0.35);
  --g-scrim-55:  rgba(0,0,0,0.55);
  --g-scrim-70:  rgba(0,0,0,0.70);
  --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 (softened for light) ------------------- */
  --g-shadow-card:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --g-shadow-float:   0 8px 24px rgba(0,0,0,0.12);
  --g-shadow-pill:    0 1px 2px rgba(0,0,0,0.08);
  --g-ring-focus:     0 0 0 3px rgba(0,107,64,0.30); /* green focus ring   */
  --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.20);

  /* ---------- 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 — light-first (scaffold background = --g-bg)
   ========================================================================== */
html, body {
  background: var(--g-bg);
  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); }