/* ============================================================
   LEV DESIGN SYSTEM — Colors & Typography
   Paste this file or @import it. Tokens are mirrored into a few
   semantic shorthands at the bottom (h1, h2, p, etc).
   ============================================================ */

/* ---------- FONT FACES ---------- */
/* Corben is the in-system substitute for Cooper BT Light (licensed).
   Cooper BT Light is preferred when available — Corben matches the
   chunky-but-friendly serif idiom. Figtree comes from Google Fonts. */

@font-face {
  font-family: "Corben";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Corben-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Corben";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Corben-Bold.ttf") format("truetype");
}

/* Figtree — provided as local TTFs (replaces the Google Fonts CDN load).
   Weights: 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold,
   800 ExtraBold, 900 Black. Italics available for every weight. */

@font-face {
  font-family: "Figtree"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("fonts/Figtree-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/Figtree-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("fonts/Figtree-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 600; font-style: italic; font-display: swap;
  src: url("fonts/Figtree-SemiBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("fonts/Figtree-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 800; font-style: italic; font-display: swap;
  src: url("fonts/Figtree-ExtraBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("fonts/Figtree-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; font-weight: 900; font-style: italic; font-display: swap;
  src: url("fonts/Figtree-BlackItalic.ttf") format("truetype");
}

/* Figtree — loaded from Google Fonts; sites should include:
   <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet"> */


/* ---------- ROOT TOKENS ---------- */
:root {
  /* PRIMARY PALETTE — ~75% of brand surface */
  --lev-ball:  #DCFF00;  /* the lime */
  --lev-spot:  #000000;  /* the black */
  --lev-bone:  #FFFFFF;  /* the white */

  /* Tints/shades of Spot & Bone (allowed for surfaces and dividers) */
  --lev-spot-90: #1a1a1a;
  --lev-spot-70: #4d4d4d;
  --lev-spot-50: #808080;
  --lev-spot-30: #b3b3b3;
  --lev-spot-12: #e0e0e0;
  --lev-spot-06: #f0f0f0;
  --lev-bone-soft: #f8f7f2;   /* warm bone — body bg variant */

  /* SECONDARY PALETTE — gradients (~25%, distributed evenly) */
  --lev-sky:      linear-gradient(135deg, #9CCFFF 0%, #D6BDFF 100%);
  --lev-kissies:  linear-gradient(135deg, #D6BDFF 0%, #FFB3D4 100%);
  --lev-hydrant:  linear-gradient(135deg, #FFB3D4 0%, #FFB571 100%);
  --lev-sunshine: linear-gradient(135deg, #FFB571 0%, #FFE559 100%);

  /* Gradient stops — for icon containers, pin markers, etc. */
  --lev-sky-1: #9CCFFF;       --lev-sky-2: #D6BDFF;
  --lev-kissies-1: #D6BDFF;   --lev-kissies-2: #FFB3D4;
  --lev-hydrant-1: #FFB3D4;   --lev-hydrant-2: #FFB571;
  --lev-sunshine-1: #FFB571;  --lev-sunshine-2: #FFE559;

  /* ---------- TYPOGRAPHY ---------- */
  /* Cooper BT Light is the licensed headline face; Corben is the
     open-source fallback that ships with this system. */
  --font-headline: "Cooper BT Light", "Corben", "Cooper Lt BT", "Georgia",
                   "Times New Roman", serif;
  --font-body:     "Figtree", "Inter", system-ui, -apple-system,
                   "Helvetica Neue", sans-serif;

  /* Display + headline scale (desktop; clamp scales down on mobile) */
  --fs-display: clamp(40px, 6vw, 80px);
  --fs-h1:      clamp(32px, 4.5vw, 48px);
  --fs-h2:      clamp(24px, 3vw, 32px);
  --fs-h3:      20px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 14px;

  /* Line-heights */
  --lh-display: 1.05;
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-body: 1.5;
  --lh-tight: 1.0;

  /* Weights */
  --fw-headline: 300;          /* Cooper BT Light's whole brand voice */
  --fw-body:     400;
  --fw-medium:   500;          /* nav, buttons */
  --fw-semibold: 600;          /* eyebrows, footer column heads */
  --fw-bold:     700;          /* very sparing — Corben Bold only */

  /* ---------- SPACING (use ONLY these tokens) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --sp-10: 120px;

  /* ---------- RADII (scale with element size) ---------- */
  --r-chip:    6px;
  --r-input:   12px;
  --r-card-sm: 16px;
  --r-card-md: 20px;
  --r-card-lg: 28px;
  --r-section: 36px;
  --r-screen:  48px;   /* mobile screen mockup outer corner */
  --r-pill:    999px;

  /* ---------- LEASH ---------- */
  --leash-stroke: 2.5px;

  /* ---------- LAYOUT ---------- */
  --max-w: 1280px;
  --gutter-desktop: 80px;
  --gutter-mobile:  24px;
}


/* ---------- SEMANTIC SHORTHANDS ---------- */
/* Apply these to elements directly OR copy the rules into your own
   class names. They follow the brand's voice (sentence case, no
   all-caps, Cooper for headlines, Figtree for everything else). */

.lev-display {
  font-family: var(--font-headline);
  font-weight: var(--fw-headline);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--lev-spot);
}

.lev-h1 {
  font-family: var(--font-headline);
  font-weight: var(--fw-headline);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.005em;
  color: var(--lev-spot);
}

.lev-h2 {
  font-family: var(--font-headline);
  font-weight: var(--fw-headline);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--lev-spot);
}

.lev-h3 {
  font-family: var(--font-headline);
  font-weight: var(--fw-headline);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--lev-spot);
}

.lev-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--lev-spot);
}

.lev-body, p.lev-body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--lev-spot);
  max-width: 65ch;
  text-wrap: pretty;
}

.lev-small {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--lev-spot);
}

.lev-link {
  font-family: var(--font-body);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Dark inverts */
.on-spot, .on-spot * { color: var(--lev-bone); }
.on-ball,  .on-ball *  { color: var(--lev-spot); }


/* ---------- INLINE HIGHLIGHT PILL ----------
   Used for inline emphasis — most notably the Hebrew terms.
   Stays on the same baseline as body text. */
.lev-pill {
  display: inline-block;
  background: var(--lev-ball);
  color: var(--lev-spot);
  padding: 2px 8px;
  border-radius: var(--r-chip);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
}


/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  background: var(--lev-spot);
  color: var(--lev-bone);
  transition: background 220ms ease, color 220ms ease, transform 200ms ease;
  text-decoration: none;
}
.btn:hover { background: var(--lev-ball); color: var(--lev-spot); }
.btn:active { transform: translateY(1px); }

.btn--on-dark { background: var(--lev-ball); color: var(--lev-spot); }
.btn--on-dark:hover { background: var(--lev-bone); color: var(--lev-spot); }

.btn--accent { background: var(--lev-ball); color: var(--lev-spot); }
.btn--accent:hover { background: var(--lev-spot); color: var(--lev-bone); }

.btn--ghost {
  background: transparent;
  color: var(--lev-spot);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 14px 8px;
}
/* Higher specificity than .btn:hover so the ghost never picks up the Ball fill. */
.btn.btn--ghost:hover,
.btn--ghost:hover {
  background: transparent;
  color: var(--lev-spot);
  opacity: 0.6;
}
.btn--ghost.on-spot,
.on-spot .btn--ghost { color: var(--lev-bone); }
.on-spot .btn.btn--ghost:hover,
.on-spot .btn--ghost:hover { background: transparent; color: var(--lev-bone); opacity: 0.7; }

/* Small button (in-app dense UI) — square-ish, 8px radius */
.btn--sm {
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 8px;
}


/* ---------- INPUT ---------- */
.input {
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--lev-bone);
  color: var(--lev-spot);
  border: 1px solid var(--lev-spot);
  border-radius: var(--r-input);
  padding: 14px 16px;
  width: 100%;
  outline: none;
}
.input::placeholder { color: var(--lev-spot-50); }
.input:focus { box-shadow: 0 0 0 2px var(--lev-ball); }

.input--on-dark {
  background: transparent;
  color: var(--lev-bone);
  border-color: var(--lev-bone);
}
.input--on-dark::placeholder { color: rgba(255,255,255,0.55); }


/* ---------- SECTION BACKGROUNDS ---------- */
.bg-bone { background: var(--lev-bone); color: var(--lev-spot); }
.bg-spot { background: var(--lev-spot); color: var(--lev-bone); }
.bg-ball { background: var(--lev-ball); color: var(--lev-spot); }
.bg-sky      { background: var(--lev-sky);      color: var(--lev-spot); }
.bg-kissies  { background: var(--lev-kissies);  color: var(--lev-spot); }
.bg-hydrant  { background: var(--lev-hydrant);  color: var(--lev-spot); }
.bg-sunshine { background: var(--lev-sunshine); color: var(--lev-spot); }


/* ---------- FOCUS RING ---------- */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lev-spot);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-spot :where(a, button, input, textarea, [tabindex]):focus-visible {
  outline-color: var(--lev-bone);
}