@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Mulish:wght@400;500;600;700;800&display=swap');

/* ============================================================
   COLORS — Trosa Grill
   Pulled from the brand logo (nautical navy + bright sky blue)
   and the menu boards (signal red for prices/CTAs, icy blue
   board backgrounds). Casual gatukök energy — crisp, friendly,
   appetising. NOT fine-dining dark/luxury.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --navy-900: #0A2C47;   /* deepest — logo outline / wordmark dark */
  --navy-800: #0E3A5C;   /* primary navy — headings, bars */
  --navy-700: #134A73;
  --navy-600: #1A5E8F;

  --blue-600: #1488C9;
  --blue-500: #1C9AD6;   /* bright logo blue — sails / banner */
  --blue-400: #2BA8E0;   /* banner highlight */
  --blue-300: #7FC7EA;
  --blue-200: #BBE0F4;

  --red-700:  #C2160F;
  --red-600:  #E11A12;   /* signal red — prices, hot CTAs ("order now!") */
  --red-500:  #F23026;

  /* ---- Ice / surface tints (menu-board background family) ---- */
  --ice-50:  #F6FBFD;
  --ice-100: #EAF4FB;    /* default page wash */
  --ice-200: #D8EAF5;
  --ice-300: #C2DEEF;

  /* ---- Neutrals ---- */
  --white:   #FFFFFF;
  --ink-900: #0B2233;    /* body text on light */
  --ink-700: #2E4A5E;
  --ink-500: #5C7689;    /* muted text */
  --ink-300: #9CB2C0;
  --line:    #DCEAF2;    /* hairline borders */

  /* ---- Appetite warm (food accents, used sparingly) ---- */
  --warm-amber: #F2A93B; /* fries / golden — sparing highlight */

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components / UI
     ============================================================ */
  --bg-page:        var(--ice-100);
  --bg-page-alt:    var(--ice-50);
  --surface-card:   var(--white);
  --surface-navy:   var(--navy-800);
  --surface-sunken: var(--ice-200);

  --text-strong:    var(--navy-800);
  --text-body:      var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-on-navy:   var(--white);
  --text-on-blue:   var(--white);

  --price:          var(--red-600);
  --accent:         var(--blue-500);

  --action-primary:        var(--red-600);
  --action-primary-hover:  var(--red-700);
  --action-secondary:      var(--navy-800);
  --action-secondary-hover:var(--navy-900);

  --border-subtle:  var(--line);
  --border-strong:  var(--navy-800);

  --focus-ring:     var(--blue-400);

  /* veg / dietary chips */
  --tag-veg-bg:     #2BA24B;
  --tag-veg-fg:     #FFFFFF;
  --tag-gf-bg:      #2BA24B;
  --tag-hot-bg:     var(--red-600);
}

/* ============================================================
   TYPOGRAPHY — Trosa Grill
   ============================================================ */
:root {
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Type scale (fluid where it matters) */
  --fs-hero:    clamp(2.75rem, 6vw, 5.25rem); /* @kind font */
  --fs-display: clamp(2rem, 4vw, 3.25rem); /* @kind font */
  --fs-h1:      2.25rem; /* @kind font */
  --fs-h2:      1.625rem; /* @kind font */
  --fs-h3:      1.25rem; /* @kind font */
  --fs-lead:    1.1875rem; /* @kind font */
  --fs-body:    1rem; /* @kind font */
  --fs-sm:      0.875rem; /* @kind font */
  --fs-xs:      0.75rem; /* @kind font */

  /* Line heights */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.2; /* @kind font */
  --lh-normal:  1.55; /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.04em; /* @kind font */
  --ls-caps:    0.12em; /* @kind font */
}

/* Opt-in helper classes (consumers may use the tokens directly) */
.tg-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.tg-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

/* ============================================================
   SPACING & LAYOUT — Trosa Grill  (4px base grid)
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section rhythm */
  --section-y: clamp(56px, 8vw, 112px); /* @kind spacing */

  /* Container */
  --container:     1200px; /* @kind spacing */
  --container-narrow: 880px; /* @kind spacing */
  --gutter:        clamp(20px, 5vw, 56px); /* @kind spacing */
}

/* ============================================================
   EFFECTS — radii, shadows, borders, motion — Trosa Grill
   Cards are crisp white with soft, cool-tinted shadows (sea-air
   feel). Corners are friendly but not bubbly. Buttons press in.
   ============================================================ */
:root {
  /* Radii */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* Shadows — cool navy-tinted, never neutral grey */
  --shadow-xs:  0 1px 2px rgba(10, 44, 71, 0.06);
  --shadow-sm:  0 2px 8px rgba(10, 44, 71, 0.08);
  --shadow-md:  0 8px 24px rgba(10, 44, 71, 0.10);
  --shadow-lg:  0 18px 48px rgba(10, 44, 71, 0.14);
  --shadow-red: 0 10px 24px rgba(225, 26, 18, 0.28);  /* primary CTA lift */

  /* Borders */
  --border-hair: 1px solid var(--border-subtle);
  --border-card: 1px solid var(--line);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* Focus */
  --focus-shadow: 0 0 0 3px rgba(43, 168, 224, 0.45);
}