/* =========================================================
   Toldos Los Ángeles — Design Tokens
   Colors, type, spacing, radii, shadows, layout
   Self-hosted fonts: Quicksand (display) + Noto Sans (body)
   ========================================================= */

@font-face {
  font-family: 'Quicksand';
  src: url('../../fonts/Quicksand-VariableFont_wght.ttf') format('truetype-variations'),
       url('../../fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../../fonts/NotoSans-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('../../fonts/NotoSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../../fonts/NotoSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('../../fonts/NotoSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- */
  --green-50:  #F2F9E8;
  --green-100: #E1F1CC;
  --green-200: #C7E59D;
  --green-300: #A8D568;
  --green-400: #8CC13F;
  --green-500: #6EA42A;
  --green-600: #5E8E22;
  --green-700: #4B721B;
  --green-800: #385514;
  --green-900: #22330C;

  /* ---------- Neutrals ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFAFA;
  --neutral-50:  #F5F6F4;
  --neutral-100: #EEF0EC;
  --neutral-200: #E2E4E1;
  --neutral-300: #C7CAC5;
  --neutral-400: #9CA19A;
  --neutral-500: #6B716A;
  --neutral-600: #474B46;
  --neutral-700: #2E312D;
  --neutral-800: #1F211E;
  --neutral-900: #171717;

  /* ---------- Semantic ---------- */
  --success-50:  #DCFCE7;
  --success-500: #16A34A;
  --warning-500: #F59E0B;
  --danger-500:  #DC2626;

  --bg:            var(--neutral-0);
  --bg-muted:      var(--neutral-50);
  --bg-inverse:    var(--neutral-900);
  --bg-soft-green: var(--green-50);

  --fg:               var(--neutral-900);
  --fg-muted:         var(--neutral-500);
  --fg-soft:          var(--neutral-400);
  --fg-inverse:       var(--neutral-0);
  --fg-on-dark:       #ffffff;
  --fg-on-dark-muted: #AEB3AD;

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-dark:   rgba(255, 255, 255, 0.08);

  --accent:       var(--green-500);
  --accent-hover: var(--green-600);
  --accent-soft:  var(--green-100);
  --accent-tint:  var(--green-50);

  /* ---------- Type ---------- */
  --font-display: 'Quicksand', system-ui, -apple-system, sans-serif;
  --font-body:    'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    17px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;
  --text-6xl:   60px;
  --text-7xl:   72px;

  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --track-tight:  -0.025em;
  --track-snug:   -0.015em;
  --track-normal: 0;
  --track-wide:   0.08em;

  /* ---------- Spacing ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:    0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-sm:    0 1px 3px rgba(23, 23, 23, 0.06), 0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-md:    0 4px 12px rgba(23, 23, 23, 0.06), 0 2px 4px rgba(23, 23, 23, 0.04);
  --shadow-lg:    0 12px 32px rgba(23, 23, 23, 0.08), 0 4px 8px rgba(23, 23, 23, 0.04);
  --shadow-xl:    0 24px 48px rgba(23, 23, 23, 0.12);
  --shadow-green: 0 10px 24px rgba(110, 164, 42, 0.28);

  /* ---------- Layout ---------- */
  --container-max:    1200px;
  --container-narrow: 880px;
  --container-wide:   1280px;
  --topbar-h:  40px;
  --header-h:  88px;

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --ease-out:   cubic-bezier(.2, .8, .25, 1);
  --dur-fast:   150ms;
  --dur-normal: 200ms;
  --dur-slow:   400ms;
}