/* ============================================================
   G.O.A.T — Grounds Of All Types
   Brand layer — BRIGHT YELLOW / BLACK / WHITE / GREEN
   Matches Adam's mascot logo (yellow goat-in-triangle on dark grey)
   Re-branded 2026-05-19. Overrides heritage typography from design.css.
   ============================================================ */

:root {
  --brand-yellow:      #F2D71B;   /* GOAT logo yellow — primary brand */
  --brand-yellow-warm: #FFE34D;   /* hover/tint */
  --brand-yellow-deep: #C9B100;   /* shadow/text on yellow */
  --brand-green:       #2EA84A;   /* grounds / nature accent */
  --brand-green-deep:  #1E7A33;
  --brand-green-soft:  #C9EDD2;
  --brand-black:       #0A0A0A;   /* near-black — ink + deep surfaces */
  --brand-charcoal:    #1A1A1A;   /* deep section background */
  --brand-grey-900:    #2A2A2A;
  --brand-grey-700:    #4A4A4A;
  --brand-grey-500:    #8A8A8A;
  --brand-grey-300:    #C8C8C8;
  --brand-grey-200:    #E5E5E5;
  --brand-grey-100:    #F2F2F2;
  --brand-white:       #FFFFFF;
  --brand-paper:       #FAFAFA;   /* very subtle card surface */

  /* Semantic aliases */
  --brand-primary:  var(--brand-yellow);
  --brand-accent:   var(--brand-green);
  --brand-neutral:  var(--brand-white);
  --brand-ink:      var(--brand-black);

  /* OKLCH ramps from primary yellow (for tinted accents) */
  --brand-primary-50:  oklch(from var(--brand-yellow) 96% c h);
  --brand-primary-100: oklch(from var(--brand-yellow) 92% c h);
  --brand-primary-200: oklch(from var(--brand-yellow) 86% c h);
  --brand-primary-300: oklch(from var(--brand-yellow) 80% c h);
  --brand-primary-400: oklch(from var(--brand-yellow) 75% c h);
  --brand-primary-500: var(--brand-yellow);
  --brand-primary-600: oklch(from var(--brand-yellow) 70% c h);
  --brand-primary-700: oklch(from var(--brand-yellow) 60% c h);
  --brand-primary-800: var(--brand-black);     /* headings, "deep" primary text → black */
  --brand-primary-900: var(--brand-black);

  /* Accent ramps (green) */
  --brand-accent-100: var(--brand-green-soft);
  --brand-accent-300: oklch(from var(--brand-green) 70% c h);
  --brand-accent-500: var(--brand-green);
  --brand-accent-700: var(--brand-green-deep);

  /* Surfaces */
  --surface-page:     var(--brand-white);
  --surface-card:     var(--brand-paper);
  --surface-card-2:   var(--brand-grey-100);
  --surface-deep:     var(--brand-black);
  --surface-rule:     rgba(10, 10, 10, 0.10);
  --surface-rule-strong: rgba(10, 10, 10, 0.20);

  /* Text */
  --text-default:        var(--brand-black);
  --text-muted:          var(--brand-grey-700);
  --text-faint:          var(--brand-grey-500);
  --text-on-deep:        var(--brand-white);
  --text-on-deep-muted:  var(--brand-grey-300);

  /* Utilities */
  --hover-soften: color-mix(in oklab, currentColor 88%, white);
  --paper-noise-opacity: 0;   /* paper texture KILLED — wrong vibe for this brand */

  /* Typography overrides (heritage Fraunces/Lora → bold modern) */
  --cb-font-heading_family: 'Archivo Black', 'Anton', 'Inter', system-ui, sans-serif;
  --cb-font-body_family:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cb-font-heading_weight: 900;
  --cb-font-body_weight:    400;

  /* Tighter radii + harder shadows for the bold mascot energy */
  --cb-radius-card:  8px;
  --cb-radius-btn:   6px;
  --cb-radius-input: 6px;

  --cb-shadow-card: 0 1px 0 rgba(10,10,10,0.04), 0 4px 14px rgba(10,10,10,0.08);
  --cb-shadow-btn:  0 2px 0 rgba(10,10,10,0.18);
  --cb-shadow-lift: 0 10px 30px rgba(10,10,10,0.14);
  --cb-shadow-yellow: 0 8px 24px rgba(242, 215, 27, 0.45);
}

/* Replace heritage Bunny fonts import with bold modern stack */
@import url("https://fonts.bunny.net/css?family=archivo:700,800,900|inter:400,500,600,700,800&display=swap");

/* Fallback for browsers without OKLCH */
@supports not (color: oklch(50% 0 0)) {
  :root {
    --brand-primary-50:  #FFF9D1;
    --brand-primary-100: #FFF1A1;
    --brand-primary-300: #F9E369;
    --brand-primary-700: #BFA800;
    --brand-accent-100: #C9EDD2;
    --brand-accent-300: #6CC785;
    --brand-accent-700: #1E7A33;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}