/*
  KISSD Brand CSS Style Guide
  Source: brand-book pages 08-12 (type + color system)
*/

:root {
  /* Core brand colors */
  --kissd-black: #191919;
  --kissd-red: #fa4900;
  --kissd-magenta: #fb6dfd;
  --kissd-lime: #e1ff1c;
  --kissd-offwhite: #f7f4eb;
  --kissd-grey: #b5ada8;

  /* Approved pairings */
  --pair-base-bg: var(--kissd-black);
  --pair-base-text: var(--kissd-offwhite);
  --pair-accent-text: var(--kissd-lime);
  --pair-highlight-bg: var(--kissd-lime);
  --pair-highlight-text: var(--kissd-black);

  /* Typography */
  --font-brand: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica", "Arial", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --line-height-headline: 0.9;
  --line-height-body: 1.2;

  /* Type scale */
  --type-xxl: clamp(2.4rem, 8vw, 5.4rem);
  --type-xl: clamp(1.8rem, 4vw, 3.1rem);
  --type-lg: clamp(1.2rem, 2.2vw, 1.8rem);
  --type-md: 1rem;
  --type-sm: 0.875rem;
  --type-xs: 0.75rem;

  /* Layout + rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Shape + motion */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --ring: 1px solid rgba(181, 173, 168, 0.45);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.28);
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Utility helpers for branded composition */
.kissd-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kissd-h1 {
  font-size: var(--type-xxl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-headline);
}

.kissd-h2 {
  font-size: var(--type-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-headline);
}

.kissd-body {
  font-size: var(--type-md);
  line-height: var(--line-height-body);
}

.kissd-panel {
  border: var(--ring);
  border-radius: var(--radius-lg);
  background: rgba(12, 12, 12, 0.74);
  box-shadow: var(--shadow-soft);
}