/* ============================================================
   Gallop design tokens — drop-in CSS layer.
   Source of truth: the [EXT] Gallop Figma file · node 211-2
   typography, node 4300-18 colors ("Foundations → Color Tokens",
   July 2026 palette: Core lime + Secondary mint, replacing the
   earlier ochre/blue/green accents).

   Import from any project:
     @import "../design-tokens/gallop/tokens.css";
   or copy the file in and link it before the project stylesheet.

   Fonts (load in your page/layout — not loaded here so importing
   this file never triggers network requests):
     - Gentium Basic 400 + Gentium Book Plus 400 → --gallop-font-serif
       (Google Fonts still serves the deprecated Gentium Basic;
        request both families in one link — Book Plus is its named
        successor and only downloads if Basic stops resolving.)
     - Funnel Sans   300/400/500    → --gallop-font-body
     - Geist Mono    400/500        → --gallop-font-mono

   The designer's DESIGN-SYSTEM.md refers to these same values as
   --brand-* / --neutral-* / --ochre-* etc.; here every name carries
   the --gallop- prefix so the file is safe to drop into any project
   (--brand-text-primary ≡ --gallop-text-primary, --ochre-600 ≡
   --gallop-ochre-600, and so on).
   ============================================================ */

:root,
.gallop,
.gallop-skin {
  /* ----- Brand roles ----- */
  --gallop-background:     #F9F9F2;  /* Brand/Background */
  --gallop-surface:        #F2F2EB;  /* Brand/Surface */
  --gallop-text-primary:   #362F2C;  /* Brand/Text Primary — "ink" */
  --gallop-text-secondary: #7A7471;  /* Brand/Text Secondary */
  --gallop-core:           #D8F18F;  /* Brand/Core — lime, CTAs + key interactive */
  --gallop-secondary:      #76DDAB;  /* Brand/Secondary — mint, supporting accents */
  --gallop-white:          #FFFFFF;
  --gallop-black:          #000000;

  /* Legacy accent aliases — the ochre/blue/green trio was retired in the
     July 2026 palette. Kept so existing consumers keep resolving; new work
     should use --gallop-core / --gallop-secondary directly. */
  --gallop-accent-ochre:   var(--gallop-core);
  --gallop-accent-blue:    var(--gallop-secondary);
  --gallop-accent-green:   var(--gallop-secondary);

  /* ----- Neutral ramp (brand roles occupy the 50 + 500 slots) ----- */
  --gallop-neutral-50:  #F9F9F2;  /* = background */
  --gallop-neutral-100: #E3E2DC;
  --gallop-neutral-200: #B8B6B0;
  --gallop-neutral-300: #8D8984;
  --gallop-neutral-400: #615C58;
  --gallop-neutral-500: #362F2C;  /* = text-primary */
  --gallop-neutral-600: #302926;
  --gallop-neutral-700: #29231F;
  --gallop-neutral-800: #231D19;
  --gallop-neutral-900: #1D1713;
  --gallop-neutral-950: #1A140F;

  /* ----- Core ramp (lime) — derived from Brand/Core #D8F18F.
     Light tints for backgrounds/highlights, dark shades for hover
     states and contrast pairings. ----- */
  --gallop-core-50:  #F8F9F6;
  --gallop-core-100: #F0F3E7;
  --gallop-core-200: #E3EACC;
  --gallop-core-300: #D2E3A1;
  --gallop-core-400: #C3E06B;
  --gallop-core-500: #B9E533;
  --gallop-core-600: #9FCC1A;
  --gallop-core-700: #78971B;
  --gallop-core-800: #536718;
  --gallop-core-900: #343F13;
  --gallop-core-950: #1F250E;

  /* ----- Secondary ramp (mint) — derived from Brand/Secondary #76DDAB.
     Light tints for success/positive backgrounds, dark shades for text
     on light surfaces. ----- */
  --gallop-secondary-50:  #F6F9F7;
  --gallop-secondary-100: #E8F2ED;
  --gallop-secondary-200: #CFE7DC;
  --gallop-secondary-300: #A8DCC3;
  --gallop-secondary-400: #78D3A7;
  --gallop-secondary-500: #47D18E;
  --gallop-secondary-600: #2EB875;
  --gallop-secondary-700: #298A5B;
  --gallop-secondary-800: #215E41;
  --gallop-secondary-900: #183A29;
  --gallop-secondary-950: #10231A;

  /* ----- Legacy ramp aliases — ochre/blue/green were retired in the
     July 2026 palette. Ochre maps onto Core, blue and green onto
     Secondary, so older rules keep resolving to the new brand. ----- */
  --gallop-ochre-50:  var(--gallop-core-50);
  --gallop-ochre-100: var(--gallop-core-100);
  --gallop-ochre-200: var(--gallop-core-200);
  --gallop-ochre-300: var(--gallop-core-300);
  --gallop-ochre-400: var(--gallop-core-400);
  --gallop-ochre-500: var(--gallop-core-500);
  --gallop-ochre-600: var(--gallop-core-600);
  --gallop-ochre-700: var(--gallop-core-700);
  --gallop-ochre-800: var(--gallop-core-800);
  --gallop-ochre-900: var(--gallop-core-900);
  --gallop-ochre-950: var(--gallop-core-950);

  --gallop-blue-50:  var(--gallop-secondary-50);
  --gallop-blue-100: var(--gallop-secondary-100);
  --gallop-blue-200: var(--gallop-secondary-200);
  --gallop-blue-300: var(--gallop-secondary-300);
  --gallop-blue-400: var(--gallop-secondary-400);
  --gallop-blue-500: var(--gallop-secondary-500);
  --gallop-blue-600: var(--gallop-secondary-600);
  --gallop-blue-700: var(--gallop-secondary-700);
  --gallop-blue-800: var(--gallop-secondary-800);
  --gallop-blue-900: var(--gallop-secondary-900);
  --gallop-blue-950: var(--gallop-secondary-950);

  --gallop-green-50:  var(--gallop-secondary-50);
  --gallop-green-100: var(--gallop-secondary-100);
  --gallop-green-200: var(--gallop-secondary-200);
  --gallop-green-300: var(--gallop-secondary-300);
  --gallop-green-400: var(--gallop-secondary-400);
  --gallop-green-500: var(--gallop-secondary-500);
  --gallop-green-600: var(--gallop-secondary-600);
  --gallop-green-700: var(--gallop-secondary-700);
  --gallop-green-800: var(--gallop-secondary-800);
  --gallop-green-900: var(--gallop-secondary-900);
  --gallop-green-950: var(--gallop-secondary-950);

  /* ----- Spacing (Figma scale: 12/32/40/48 + known uses) ----- */
  --gallop-space-12: 12px;         /* button pad-y */
  --gallop-space-32: 32px;         /* button pad-x */
  --gallop-space-40: 40px;         /* page side margins */
  --gallop-space-48: 48px;         /* section-heading rhythm */
  --gallop-space-section: 180px;   /* between major sections */
  --gallop-space-card-gap: 20px;
  --gallop-space-card-pad: 25px;
  --gallop-canvas-max: 1440px;
  --gallop-content-max: 1360px;

  /* ----- Radius (square-cornered brand; nav bar is the exception) ----- */
  --gallop-rounded-none: 0;
  --gallop-rounded-nav: 3.75px;

  /* ----- Font stacks ----- */
  --gallop-font-serif: "Lustria", Georgia, serif;
  --gallop-font-body:  "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --gallop-font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type ramp (Figma text styles) ----- */
  --gallop-text-heading-xl: 3rem;      /* 48 */
  --gallop-text-heading-lg: 2.625rem;  /* 42 */
  --gallop-text-heading-md: 2.25rem;   /* 36 */
  --gallop-text-heading-sm: 2rem;      /* 32 */
  --gallop-text-heading-xs: 1.75rem;   /* 28 */
  --gallop-text-body-xl:    1.25rem;   /* 20 */
  --gallop-text-body-lg:    1.125rem;  /* 18 */
  --gallop-text-body-md:    1rem;      /* 16 */
  --gallop-text-label-md:   1rem;      /* 16 */
  --gallop-text-label-sm:   .8125rem;  /* 13 */

  --gallop-leading-heading-xl: 1.02;
  --gallop-leading-heading-lg: 1.08;
  --gallop-leading-heading-md: 1.1;
  --gallop-leading-heading-sm: 1.12;
  --gallop-leading-heading-xs: 1.12;
  --gallop-leading-body:       1.24;
  --gallop-leading-label:      1.2;
  --gallop-leading-label-tight: 1.1;   /* label-sm/medium */

  --gallop-tracking:         -0.02em;  /* everything except heading-xl */
  --gallop-tracking-display: -0.03em;  /* heading-xl */
}

/* ----- Type pattern classes (mirror the typeStyles in tokens.json).
   Heading sizes are fluid — clamp() carries them down to small
   viewports, so no breakpoint overrides are needed. ----- */
.gallop-heading-xl,
.gallop-heading-lg,
.gallop-heading-md,
.gallop-heading-sm,
.gallop-heading-xs {
  font-family: var(--gallop-font-serif);
  font-weight: 400;
  letter-spacing: var(--gallop-tracking);
}
.gallop-heading-xl { font-size: clamp(2.1rem, 3.6vw, var(--gallop-text-heading-xl)); line-height: var(--gallop-leading-heading-xl); letter-spacing: var(--gallop-tracking-display); }
.gallop-heading-lg { font-size: clamp(1.9rem, 3.2vw, var(--gallop-text-heading-lg)); line-height: var(--gallop-leading-heading-lg); }
.gallop-heading-md { font-size: clamp(1.6rem, 2.6vw, var(--gallop-text-heading-md)); line-height: var(--gallop-leading-heading-md); }
.gallop-heading-sm { font-size: clamp(1.45rem, 2.3vw, var(--gallop-text-heading-sm)); line-height: var(--gallop-leading-heading-sm); }
.gallop-heading-xs { font-size: clamp(1.3rem, 2vw, var(--gallop-text-heading-xs)); line-height: var(--gallop-leading-heading-xs); }

.gallop-body-xl,
.gallop-body-lg,
.gallop-body-md {
  font-family: var(--gallop-font-body);
  font-weight: 400;
  line-height: var(--gallop-leading-body);
  letter-spacing: var(--gallop-tracking);
}
.gallop-body-xl { font-size: var(--gallop-text-body-xl); }
.gallop-body-lg { font-size: var(--gallop-text-body-lg); }
.gallop-body-md { font-size: var(--gallop-text-body-md); }

.gallop-label-md,
.gallop-label-sm {
  font-family: var(--gallop-font-mono);
  font-weight: 500;
  line-height: var(--gallop-leading-label);
  letter-spacing: var(--gallop-tracking);
  text-transform: uppercase;
}
.gallop-label-md { font-size: var(--gallop-text-label-md); }
.gallop-label-sm { font-size: var(--gallop-text-label-sm); }

/* Opt-in base: wrap a region in .gallop-skin to get the paper +
   ink + body type defaults without touching the rest of the page. */
.gallop-skin {
  background: var(--gallop-background);
  color: var(--gallop-text-primary);
  font-family: var(--gallop-font-body);
  font-size: var(--gallop-text-body-md);
  line-height: var(--gallop-leading-body);
  letter-spacing: var(--gallop-tracking);
}