/* wireframe-imogene tokens — derived from /tokens/*.json (do not hand-edit; regenerate if tokens change) */

:root {
  /* ---------- Primitives: Color (grayscale only) ---------- */
  --color-white: #FFFFFF;
  --color-neutral-lightest: #EEEEEE;
  --color-neutral-lighter: #CCCCCC;
  --color-neutral-light: #AAAAAA;
  --color-neutral: #666666;
  --color-neutral-dark: #444444;
  --color-neutral-darker: #222222;
  --color-neutral-darkest: #000000;

  /* ---------- Primitives: Opacity ---------- */
  --opacity-transparent: rgba(255,255,255,0);
  --opacity-white-5:  rgba(255,255,255,0.05);
  --opacity-white-10: rgba(255,255,255,0.10);
  --opacity-white-15: rgba(255,255,255,0.15);
  --opacity-white-20: rgba(255,255,255,0.20);
  --opacity-white-30: rgba(255,255,255,0.30);
  --opacity-white-40: rgba(255,255,255,0.40);
  --opacity-white-50: rgba(255,255,255,0.50);
  --opacity-white-60: rgba(255,255,255,0.60);
  --opacity-black-5:  rgba(0,0,0,0.05);
  --opacity-black-10: rgba(0,0,0,0.10);
  --opacity-black-15: rgba(0,0,0,0.15);
  --opacity-black-20: rgba(0,0,0,0.20);
  --opacity-black-30: rgba(0,0,0,0.30);
  --opacity-black-40: rgba(0,0,0,0.40);
  --opacity-black-50: rgba(0,0,0,0.50);
  --opacity-black-60: rgba(0,0,0,0.60);

  /* ---------- Color Scheme 1 (semantic) ---------- */
  --scheme-text:        var(--color-neutral-darkest);
  --scheme-foreground:  var(--color-white);
  --scheme-background:  var(--color-white);
  --scheme-border:      var(--color-neutral-darkest);
  --scheme-accent:      var(--color-neutral-darkest);

  /* ---------- Font theme ---------- */
  --font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---------- UI styles ---------- */
  --radius-small: 0px;
  --radius-medium: 0px;
  --radius-large: 0px;
  --stroke-border: 1px;
  --stroke-divider: 1px;

  /* ---------- Containers ---------- */
  --container-large: 1280px;
  --container-medium: 1024px;
  --container-small: 768px;

  /* ---------- Max widths ---------- */
  --max-width-xxlarge: 1280px;
  --max-width-xlarge: 1024px;
  --max-width-large: 768px;
  --max-width-medium: 560px;
  --max-width-small: 480px;
  --max-width-xsmall: 400px;
  --max-width-xxsmall: 320px;

  /* ---------- Spacing (Desktop defaults) ---------- */
  --padding-global: 64px;
  --padding-section-large: 112px;
  --padding-section-medium: 80px;
  --padding-section-small: 48px;

  /* ---------- Typescale (Desktop defaults) ---------- */
  --font-size-h1: 56px;
  --font-size-h2: 48px;
  --font-size-h3: 40px;
  --font-size-h4: 32px;
  --font-size-h5: 24px;
  --font-size-h6: 20px;
  --font-size-text-large: 20px;
  --font-size-text-medium: 18px;
  --font-size-text-regular: 16px;
  --font-size-text-small: 14px;
  --font-size-text-tiny: 12px;
}

/* Mobile overrides */
@media (max-width: 767px) {
  :root {
    --padding-global: 20px;
    --padding-section-large: 64px;
    --padding-section-medium: 48px;
    --padding-section-small: 32px;

    --font-size-h1: 40px;
    --font-size-h2: 36px;
    --font-size-h3: 32px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
    --font-size-text-large: 18px;
    --font-size-text-medium: 16px;
  }
}

/* ---------- Wireframe base styles ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-text-regular);
  line-height: 1.5;
  color: var(--scheme-text);
  background: var(--scheme-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.15; }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p { margin: 0; }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: var(--scheme-background);
  border: var(--stroke-border) solid var(--scheme-border);
  border-radius: var(--radius-small);
  padding: 12px 16px;
}

button { cursor: pointer; }

hr { border: 0; border-top: var(--stroke-divider) solid var(--scheme-border); margin: 0; }

/* ---------- Wireframe-only helpers ---------- */
/* Image placeholder: diagonal line + label, signals "image goes here" */
.wf-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px),
      var(--scheme-border) calc(50% - 0.5px),
      var(--scheme-border) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(to top left,
      transparent calc(50% - 0.5px),
      var(--scheme-border) calc(50% - 0.5px),
      var(--scheme-border) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    var(--color-neutral-lightest);
  border: var(--stroke-border) solid var(--scheme-border);
  color: var(--color-neutral);
  font-size: var(--font-size-text-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 200px;
  width: 100%;
}

.wf-image > span {
  background: var(--scheme-background);
  padding: 4px 8px;
  border: var(--stroke-border) solid var(--scheme-border);
}

/* Container helper */
.wf-container {
  width: 100%;
  max-width: var(--container-large);
  margin: 0 auto;
  padding-left: var(--padding-global);
  padding-right: var(--padding-global);
}

/* Section helper */
.wf-section {
  padding-top: var(--padding-section-medium);
  padding-bottom: var(--padding-section-medium);
}