/* ============================================================
   EventFlow — Foundations
   colors_and_type.css

   Import this file at the root of any EventFlow surface.
   Provides:
     - Color tokens (raw + semantic)
     - Type tokens (font families, scale, weights, tracking)
     - Spacing, radius, shadow, motion tokens
     - Semantic element styles (h1..h6, p, code, small, etc)
   ============================================================ */

/* ---------- Webfonts ----------
   Manrope     — primary UI + display (variable, 200–800)
   JetBrains Mono — numeric / code / ticket IDs / timestamps
   Loaded from Google Fonts CDN with self-hosted fallback in fonts/.
   ------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ====================================================
     COLOR — raw scale
     Warm-neutral ink/bone with a single hero (Beam) and a
     small set of festive accents reserved for category +
     status work. NEVER use accents as primary brand color.
     ==================================================== */

  /* Ink (near-black, warm) */
  --ef-ink-950: #0A0A0A;
  --ef-ink-900: #141414;
  --ef-ink-800: #1F1F1D;
  --ef-ink-700: #2A2A28;
  --ef-ink-600: #3D3D3A;
  --ef-ink-500: #57574F;
  --ef-ink-400: #7A7A70;
  --ef-ink-300: #A1A199;
  --ef-ink-200: #C9C9C0;
  --ef-ink-100: #E6E6DE;
  --ef-ink-50:  #F1F1EB;

  /* Bone (warm off-white, system background) */
  --ef-bone:    #FAFAF7;
  --ef-bone-2:  #F4F4EE;
  --ef-bone-3:  #ECECE4;

  /* Beam — hero amber. Used for primary action, brand mark,
     highlight strokes, link hover. Single hero only. */
  --ef-beam-700: #B97309;
  --ef-beam-600: #DC8A0A;
  --ef-beam-500: #F5A524; /* canonical */
  --ef-beam-400: #FBBF4D;
  --ef-beam-300: #FDD888;
  --ef-beam-200: #FCE7B6;
  --ef-beam-100: #FEF3D7;

  /* Festive accents — for event categories, charts, badges.
     Keep saturated; pair only with ink or bone, never with
     each other in large fields. */
  --ef-coral:   #F25C54;  /* music / arts */
  --ef-violet:  #7A5AF8;  /* tech / business */
  --ef-cyan:    #06B6D4;  /* sports / outdoors */
  --ef-lime:    #84CC16;  /* food / community */
  --ef-magenta: #EC4899;  /* nightlife / parties */
  --ef-cobalt:  #2563EB;  /* education / workshops */

  /* Status */
  --ef-success: #15803D;
  --ef-warning: #B45309;
  --ef-danger:  #B91C1C;
  --ef-info:    #1D4ED8;

  /* ====================================================
     COLOR — semantic
     Always reference these in components; never raw scale.
     ==================================================== */

  /* Backgrounds */
  --ef-bg:          var(--ef-bone);
  --ef-bg-raised:   #FFFFFF;
  --ef-bg-sunken:   var(--ef-bone-2);
  --ef-bg-inverse:  var(--ef-ink-950);
  --ef-bg-overlay:  rgba(10, 10, 10, 0.55);

  /* Foreground / text */
  --ef-fg-1:        var(--ef-ink-950); /* headings, key text */
  --ef-fg-2:        var(--ef-ink-700); /* body */
  --ef-fg-3:        var(--ef-ink-500); /* secondary, captions */
  --ef-fg-4:        var(--ef-ink-400); /* tertiary, placeholder */
  --ef-fg-inverse:  var(--ef-bone);
  --ef-fg-brand:    var(--ef-beam-700);
  --ef-fg-link:     var(--ef-ink-950);

  /* Borders */
  --ef-border:        var(--ef-ink-100);
  --ef-border-strong: var(--ef-ink-200);
  --ef-border-ink:    var(--ef-ink-950);
  --ef-border-focus:  var(--ef-ink-950);

  /* Actions */
  --ef-action-primary-bg:        var(--ef-ink-950);
  --ef-action-primary-fg:        var(--ef-bone);
  --ef-action-primary-hover:     var(--ef-ink-800);
  --ef-action-secondary-bg:      var(--ef-bone);
  --ef-action-secondary-fg:      var(--ef-ink-950);
  --ef-action-secondary-border:  var(--ef-ink-950);
  --ef-action-accent-bg:         var(--ef-beam-500);
  --ef-action-accent-fg:         var(--ef-ink-950);
  --ef-action-accent-hover:      var(--ef-beam-600);

  /* ====================================================
     TYPE
     Manrope as single sans (display + UI). JetBrains Mono
     for codes, timestamps, ticket IDs, tabular numbers.
     ==================================================== */
  --ef-font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ef-font-display: "Manrope", ui-sans-serif, system-ui, sans-serif; /* same family, weight 800 */
  --ef-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ef-w-regular:  400;
  --ef-w-medium:   500;
  --ef-w-semibold: 600;
  --ef-w-bold:     700;
  --ef-w-black:    800;

  /* Type scale — 1.200 modular ratio, anchored at 16px */
  --ef-text-2xs:  11px;
  --ef-text-xs:   12px;
  --ef-text-sm:   14px;
  --ef-text-base: 16px;
  --ef-text-md:   18px;
  --ef-text-lg:   22px;
  --ef-text-xl:   28px;
  --ef-text-2xl:  36px;
  --ef-text-3xl:  48px;
  --ef-text-4xl:  64px;
  --ef-text-5xl:  84px;
  --ef-text-hero: 112px;

  /* Tracking — display tightens, micro-copy loosens */
  --ef-track-display: -0.03em;
  --ef-track-heading: -0.02em;
  --ef-track-body:    -0.005em;
  --ef-track-eyebrow: 0.14em;   /* ALL-CAPS labels */
  --ef-track-mono:    0;

  /* Line heights */
  --ef-leading-display: 0.98;
  --ef-leading-heading: 1.1;
  --ef-leading-body:    1.5;
  --ef-leading-tight:   1.3;

  /* ====================================================
     SPACING — 4px base
     ==================================================== */
  --ef-space-0:   0;
  --ef-space-1:   4px;
  --ef-space-2:   8px;
  --ef-space-3:   12px;
  --ef-space-4:   16px;
  --ef-space-5:   20px;
  --ef-space-6:   24px;
  --ef-space-8:   32px;
  --ef-space-10:  40px;
  --ef-space-12:  48px;
  --ef-space-16:  64px;
  --ef-space-20:  80px;
  --ef-space-24:  96px;
  --ef-space-32:  128px;

  /* ====================================================
     RADIUS
     EventFlow uses a tight radius (4–8px) on most chrome
     and a 999px pill on chips/tickets. Cards: 12–16px.
     ==================================================== */
  --ef-radius-xs:   2px;
  --ef-radius-sm:   4px;
  --ef-radius-md:   8px;
  --ef-radius-lg:   12px;
  --ef-radius-xl:   16px;
  --ef-radius-2xl:  24px;
  --ef-radius-pill: 999px;

  /* ====================================================
     SHADOW
     Crisp + flat. Use sparingly — most surfaces use 1px
     borders. Shadows reserved for menus, modals, toasts.
     ==================================================== */
  --ef-shadow-xs:   0 1px 0 rgba(10, 10, 10, 0.04);
  --ef-shadow-sm:   0 1px 2px rgba(10, 10, 10, 0.06), 0 1px 1px rgba(10, 10, 10, 0.04);
  --ef-shadow-md:   0 6px 16px -4px rgba(10, 10, 10, 0.10), 0 2px 4px rgba(10, 10, 10, 0.05);
  --ef-shadow-lg:   0 18px 40px -12px rgba(10, 10, 10, 0.18), 0 4px 8px rgba(10, 10, 10, 0.06);
  --ef-shadow-xl:   0 32px 80px -16px rgba(10, 10, 10, 0.24), 0 8px 16px rgba(10, 10, 10, 0.08);
  --ef-shadow-inset: inset 0 0 0 1px var(--ef-border);
  --ef-shadow-ring:  0 0 0 3px var(--ef-beam-300);

  /* ====================================================
     MOTION
     Short, snappy, never bouncy.
     ==================================================== */
  --ef-ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ef-ease-in:    cubic-bezier(0.6, 0, 0.85, 0.3);
  --ef-ease-inout: cubic-bezier(0.6, 0, 0.2, 1);
  --ef-dur-1:      120ms;
  --ef-dur-2:      180ms;
  --ef-dur-3:      280ms;
  --ef-dur-4:      420ms;

  /* ====================================================
     LAYOUT
     ==================================================== */
  --ef-container:  1280px;
  --ef-container-narrow: 920px;
  --ef-z-base:    1;
  --ef-z-sticky:  20;
  --ef-z-overlay: 40;
  --ef-z-modal:   60;
  --ef-z-toast:   80;
}

/* ============================================================
   SEMANTIC ELEMENTS
   Apply globally. Components inherit these.
   ============================================================ */

html, body {
  background: var(--ef-bg);
  color: var(--ef-fg-2);
  font-family: var(--ef-font-sans);
  font-size: var(--ef-text-base);
  line-height: var(--ef-leading-body);
  letter-spacing: var(--ef-track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ef-fg-1);
  font-family: var(--ef-font-display);
  font-weight: var(--ef-w-black);
  letter-spacing: var(--ef-track-display);
  line-height: var(--ef-leading-display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--ef-text-4xl); }
h2 { font-size: var(--ef-text-3xl); letter-spacing: var(--ef-track-heading); }
h3 { font-size: var(--ef-text-2xl); letter-spacing: var(--ef-track-heading); line-height: var(--ef-leading-heading); }
h4 { font-size: var(--ef-text-xl);  letter-spacing: var(--ef-track-heading); line-height: var(--ef-leading-heading); font-weight: var(--ef-w-bold); }
h5 { font-size: var(--ef-text-lg);  letter-spacing: var(--ef-track-heading); line-height: var(--ef-leading-heading); font-weight: var(--ef-w-bold); }
h6 { font-size: var(--ef-text-md);  letter-spacing: var(--ef-track-body);    line-height: var(--ef-leading-heading); font-weight: var(--ef-w-semibold); }

p {
  margin: 0;
  color: var(--ef-fg-2);
  text-wrap: pretty;
}

small, .ef-caption {
  font-size: var(--ef-text-xs);
  color: var(--ef-fg-3);
  letter-spacing: 0;
}

code, kbd, samp, pre {
  font-family: var(--ef-font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

a {
  color: var(--ef-fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ef-dur-1) var(--ef-ease-out);
}
a:hover { color: var(--ef-fg-brand); }

/* ============================================================
   UTILITY CLASSES — for use in JSX components
   ============================================================ */

.ef-eyebrow {
  font-size: var(--ef-text-xs);
  font-weight: var(--ef-w-semibold);
  letter-spacing: var(--ef-track-eyebrow);
  text-transform: uppercase;
  color: var(--ef-fg-3);
}

.ef-display {
  font-family: var(--ef-font-display);
  font-weight: var(--ef-w-black);
  letter-spacing: var(--ef-track-display);
  line-height: var(--ef-leading-display);
  color: var(--ef-fg-1);
}

.ef-mono { font-family: var(--ef-font-mono); }
.ef-tabular { font-variant-numeric: tabular-nums; }

.ef-divider {
  border: 0;
  border-top: 1px solid var(--ef-border);
  margin: 0;
}

/* ============================================================
   FOCUS — keyboard outline (uses Beam ring)
   ============================================================ */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ef-shadow-ring);
  border-radius: var(--ef-radius-sm);
}

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ef-ink-200); border-radius: var(--ef-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ef-ink-300); }

/* Selection */
::selection { background: var(--ef-beam-300); color: var(--ef-ink-950); }