/* =========================================================================
   Italian Dogs — Color & Type Foundations
   Dark-first techno-label admin. Monochrome neutrals + electric signal accent.
   ========================================================================= */

/* ---------- Webfonts ----------
   Display: "Benzin" (label's brand font — supply file via fonts/benzin/).
   Until the real file is loaded, the stack falls through to Chakra Petch
   (closest Google Fonts match: geometric, industrial, squared terminals).
   Body/UI: Space Grotesk (geometric grotesque, industrial DNA, readable at UI sizes).
   Mono: JetBrains Mono (catalog numbers, timecodes, IDs, BPM, key signatures).
*/
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* If the user supplies the Benzin font file, drop it in fonts/benzin/
   and this declaration will pick it up. */
@font-face {
  font-family: "Benzin";
  src: url("fonts/benzin/Benzin-Bold.woff2") format("woff2"),
       url("fonts/benzin/Benzin-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   COLOR TOKENS
   ========================================================================= */

:root,
[data-theme="dark"] {
  /* Backgrounds — true blacks with subtle steps */
  --bg-0: #0A0A0A;        /* page */
  --bg-1: #121212;        /* panel */
  --bg-2: #1A1A1A;        /* raised / card */
  --bg-3: #222222;        /* hover */
  --bg-4: #2A2A2A;        /* active / selected */
  --bg-inverse: #FAFAFA;

  /* Foreground */
  --fg-1: #F5F5F5;        /* primary text */
  --fg-2: #A8A8A8;        /* secondary / labels */
  --fg-3: #6B6B6B;        /* tertiary / disabled */
  --fg-4: #3F3F3F;        /* placeholder */
  --fg-inverse: #0A0A0A;

  /* Borders / hairlines */
  --border-1: #1F1F1F;    /* subtle divider */
  --border-2: #2E2E2E;    /* card outline */
  --border-3: #4A4A4A;    /* input border */
  --border-focus: var(--accent);

  /* Brand accent — UV signal lime. Techno / rave DNA. Used sparingly. */
  --accent:        #C8FF00;
  --accent-hover:  #D6FF33;
  --accent-press:  #A8DC00;
  --accent-dim:    #8FB800;
  --accent-fg:     #0A0A0A;          /* text on accent */
  --accent-tint:   rgba(200,255,0,0.12);
  --accent-tint-2: rgba(200,255,0,0.18);

  /* Brand red — LOGO ONLY. Not a UI color. */
  --brand-red:     #EE2524;

  /* Signal red — destructive / live indicators (separate from brand red) */
  --signal-red:    #FF2D2D;
  --signal-red-fg: #FFFFFF;

  /* Semantic */
  --success: #00D084;
  --warning: #FFB800;
  --danger:  #FF3B30;
  --info:    #4A9EFF;

  /* Status pill backgrounds (translucent) */
  --tint-success: rgba(0,208,132,0.14);
  --tint-warning: rgba(255,184,0,0.14);
  --tint-danger:  rgba(255,59,48,0.14);
  --tint-info:    rgba(74,158,255,0.14);
  --tint-neutral: rgba(255,255,255,0.06);

  /* Shadows — used sparingly; dark UI relies on borders + bg steps */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.7);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg-0: #FAFAFA;
  --bg-1: #FFFFFF;
  --bg-2: #F4F4F4;
  --bg-3: #EAEAEA;
  --bg-4: #DDDDDD;
  --bg-inverse: #0A0A0A;

  --fg-1: #0A0A0A;
  --fg-2: #555555;
  --fg-3: #888888;
  --fg-4: #B0B0B0;
  --fg-inverse: #FAFAFA;

  --border-1: #ECECEC;
  --border-2: #DCDCDC;
  --border-3: #B8B8B8;

  /* Lime on white at AA-passable contrast: drop the tone */
  --accent:        #5C7A00;
  --accent-hover:  #6E9000;
  --accent-press:  #4A6300;
  --accent-dim:    #8FB800;
  --accent-fg:     #FFFFFF;
  --accent-tint:   rgba(92,122,0,0.10);
  --accent-tint-2: rgba(92,122,0,0.16);

  --brand-red:     #EE2524;
  --signal-red:    #E52020;
  --signal-red-fg: #FFFFFF;

  --success: #009660;
  --warning: #B47A00;
  --danger:  #D62A20;
  --info:    #2A6FDB;

  --tint-success: rgba(0,150,96,0.10);
  --tint-warning: rgba(180,122,0,0.12);
  --tint-danger:  rgba(214,42,32,0.10);
  --tint-info:    rgba(42,111,219,0.10);
  --tint-neutral: rgba(0,0,0,0.05);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.18);

  color-scheme: light;
}

/* =========================================================================
   TYPE TOKENS
   ========================================================================= */

:root {
  /* Font stacks */
  --font-display: "Benzin", "Chakra Petch", "Space Grotesk", system-ui, sans-serif;
  --font-ui:      "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — admin-density first; display sizes reserved for big surfaces */
  --text-12: 0.75rem;     /* metadata, table cells, micro labels */
  --text-13: 0.8125rem;   /* secondary UI */
  --text-14: 0.875rem;    /* body / form */
  --text-16: 1rem;        /* base */
  --text-18: 1.125rem;    /* h5 */
  --text-22: 1.375rem;    /* h4 */
  --text-28: 1.75rem;     /* h3 */
  --text-36: 2.25rem;     /* h2 */
  --text-48: 3rem;        /* h1 / page title */
  --text-72: 4.5rem;      /* display / hero */
  --text-120: 7.5rem;     /* big-stat number / cover art */

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;

  /* Tracking */
  --track-display: -0.02em;   /* tighten big display */
  --track-tight:   -0.01em;
  --track-normal:  0;
  --track-caps:    0.08em;    /* SECTION LABELS, BADGES */
  --track-cap-wide:0.16em;    /* HERO EYEBROWS */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.45;
  --lh-loose: 1.6;
}

/* =========================================================================
   SEMANTIC TYPE — apply to real elements
   ========================================================================= */

body {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-0);
  font-feature-settings: "ss01", "cv11";
}

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

h1, .h1 { font-size: var(--text-48); }
h2, .h2 { font-size: var(--text-36); }
h3, .h3 { font-size: var(--text-28); }
h4, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--w-semi);
  font-size: var(--text-22);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}
h5, .h5 {
  font-family: var(--font-ui);
  font-weight: var(--w-semi);
  font-size: var(--text-18);
  line-height: var(--lh-snug);
}

.eyebrow,
.section-label {
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .body { font-size: var(--text-14); line-height: var(--lh-base); }
.body-lg { font-size: var(--text-16); }
.caption { font-size: var(--text-12); color: var(--fg-2); }

.mono,
code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum", "zero";
}

/* =========================================================================
   GEOMETRY — radii, spacing, motion
   ========================================================================= */

:root {
  /* Radii — sharp / industrial. Cards stay near-square. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;     /* used only for popovers / floating menus */
  --radius-pill: 999px;

  /* Spacing — 4pt base */
  --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;

  /* Motion — fast, mechanical, no bounce */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 80ms;       /* state changes: hover, press */
  --dur-2: 160ms;      /* enters, fades */
  --dur-3: 280ms;      /* panels */
}

/* =========================================================================
   GLOBAL UTILITIES
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

::selection {
  background: var(--accent);
  color: var(--accent-fg);
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
a:hover { border-bottom-color: var(--accent); }