/* ─────────────────────────────────────────────────────────────
   Evaluation Portal — design tokens
   Platform-fixed tokens live on :root. Per-company themeable
   tokens live under data-theme selectors and may be overridden
   at runtime by the Tweaks panel.
   ───────────────────────────────────────────────────────────── */

:root {
  /* — Type scale (platform-fixed) — */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-base: 16px;
  --fs-md:  18px;
  --fs-lg:  22px;
  --fs-xl:  28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 88px;

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-base: -0.005em;
  --tracking-wide: 0.08em;

  /* — Spacing scale (platform-fixed) — */
  --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:  96px;
  --sp-10: 128px;

  /* — Platform neutrals (not themed per company) — */
  --ink-strong:  oklch(0.20 0.01 255);
  --ink-body:    oklch(0.32 0.01 255);
  --ink-muted:   oklch(0.52 0.008 255);
  --ink-subtle:  oklch(0.68 0.006 255);
  --line:        oklch(0.90 0.006 255);
  --line-strong: oklch(0.80 0.008 255);
  --surface:     oklch(1 0 0);
  --ground:      oklch(0.985 0.003 80);
  --ground-alt:  oklch(0.965 0.004 80);

  /* — Admin UI accent — used for active-tab underlines, selection,
       primary CTAs in the (unthemed) admin chrome. Echoes the Shifts
       wordmark; NOT used as a scope/role colour. — */
  --accent:      oklch(0.55 0.20 28);
  --accent-soft: oklch(0.96 0.04 28);
  --accent-ink:  oklch(0.99 0.002 80);

  /* — Feedback — */
  --danger:  oklch(0.54 0.19 28);
  --success: oklch(0.60 0.13 155);
  --warn:    oklch(0.70 0.14 75);

  /* — Question-type accents (admin Questions page).
       Each question type gets a soft tint + ink for chips/previews. — */
  --qt-text:       oklch(0.55 0.05 255);   --qt-text-soft:       oklch(0.96 0.01 255);
  --qt-choice:     oklch(0.50 0.12 250);   --qt-choice-soft:     oklch(0.96 0.04 250);
  --qt-scale:      oklch(0.55 0.13 290);   --qt-scale-soft:      oklch(0.96 0.04 290);
  --qt-audio:      oklch(0.58 0.16 50);    --qt-audio-soft:      oklch(0.96 0.05 50);
  --qt-demographic:oklch(0.50 0.06 200);   --qt-demographic-soft:oklch(0.96 0.02 200);
  --qt-consent:    oklch(0.50 0.10 155);   --qt-consent-soft:    oklch(0.96 0.04 155);

  /* — Branching / condition accent — uses the admin accent
       so logic chips visibly pop without inventing a new colour. — */
  --logic:      var(--accent);
  --logic-soft: var(--accent-soft);

  /* — Funnel / sequence palette (used to encode journey stages,
       not status). Cool → warm → green: opens, started, story-1,
       completed. Each has a paired soft tint for backgrounds. — */
  --seq-1:      oklch(0.55 0.05 255);   /* slate */
  --seq-1-soft: oklch(0.93 0.02 255);
  --seq-2:      oklch(0.62 0.13 50);    /* warm orange */
  --seq-2-soft: oklch(0.95 0.05 50);
  --seq-3:      oklch(0.66 0.14 75);    /* amber */
  --seq-3-soft: oklch(0.96 0.05 75);
  --seq-4:      oklch(0.55 0.13 155);   /* green — completed */
  --seq-4-soft: oklch(0.95 0.04 155);

  /* — Radii scale — */
  --r-sharp: 0px;
  --r-soft:  4px;
  --r-pill:  999px;

  /* — Shadow scale (subtle, institutional) — */
  --shadow-1: 0 1px 0 oklch(0 0 0 / 0.04);
  --shadow-2: 0 1px 2px oklch(0 0 0 / 0.04), 0 2px 6px oklch(0 0 0 / 0.04);
  --shadow-3: 0 4px 12px oklch(0 0 0 / 0.06), 0 12px 32px oklch(0 0 0 / 0.06);

  /* — Type families (platform-fixed for admin; themed for responder) — */
  --font-display: 'Source Serif 4', 'Source Serif Pro', Charter, 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ─── AYLP theme (responder) ─────────────────────────────────── */
[data-theme="aylp"] {
  --brand-primary:      oklch(0.22 0.04 255);       /* deep navy */
  --brand-primary-ink:  oklch(0.98 0.003 80);       /* off-white on navy */
  --brand-accent:       oklch(0.55 0.20 28);        /* warm red */
  --brand-accent-ink:   oklch(0.99 0.002 80);
  --brand-ground:       oklch(0.98 0.004 80);       /* warm off-white */
  --brand-ground-alt:   oklch(0.955 0.006 80);
  --brand-ink:          oklch(0.22 0.04 255);
  --brand-ink-muted:    oklch(0.48 0.015 255);
  --brand-line:         oklch(0.88 0.008 255);
  --brand-heading-font: 'Source Serif 4', 'Source Serif Pro', Charter, Georgia, serif;
  --brand-body-font:    'Inter Tight', 'Inter', 'Helvetica Neue', sans-serif;
  --brand-corner:       var(--r-sharp);
  --brand-logo-mark:    'AYLP';
  --brand-logo-name:    'Aspen Young Leaders Programme';
}

/* ─── Default / evaluace theme (responder) ───────────────────── */
[data-theme="evaluace"] {
  --brand-primary:      oklch(0.24 0.01 60);        /* warm near-black */
  --brand-primary-ink:  oklch(0.97 0.008 80);
  --brand-accent:       oklch(0.66 0.16 35);        /* coral */
  --brand-accent-ink:   oklch(0.99 0.002 80);
  --brand-ground:       oklch(0.975 0.006 80);      /* warm paper */
  --brand-ground-alt:   oklch(0.95 0.008 80);
  --brand-ink:          oklch(0.24 0.01 60);
  --brand-ink-muted:    oklch(0.48 0.008 60);
  --brand-line:         oklch(0.88 0.008 60);
  --brand-heading-font: 'Source Serif 4', Charter, Georgia, serif;
  --brand-body-font:    'Inter Tight', 'Inter', 'Helvetica Neue', sans-serif;
  --brand-corner:       var(--r-soft);
  --brand-logo-mark:    'e';
  --brand-logo-name:    'evaluace';
}

/* ─── Bold Blue theme (v2 — deep editorial blue + warm red) ──── */
[data-theme="bold-blue"] {
  --brand-primary:      oklch(0.28 0.07 255);       /* deep editorial blue */
  --brand-primary-ink:  oklch(0.97 0.008 80);       /* off-white on blue */
  --brand-accent:       oklch(0.58 0.20 28);        /* warm red CTA */
  --brand-accent-ink:   oklch(0.99 0.002 80);
  --brand-ground:       oklch(0.28 0.07 255);       /* page = navy */
  --brand-ground-alt:   oklch(0.32 0.06 255);
  --brand-ink:          oklch(0.97 0.008 80);
  --brand-ink-muted:    oklch(0.78 0.03 255);
  --brand-line:         oklch(0.40 0.05 255);
  --brand-heading-font: 'Source Serif 4', Charter, Georgia, serif;
  --brand-body-font:    'Inter Tight', 'Inter', 'Helvetica Neue', sans-serif;
  --brand-corner:       0px;
  --brand-logo-mark:    'e';
  --brand-logo-name:    'evaluace';
}

/* ─────────────────────────────────────────────────────────────
   Base resets and primitives used in mock frames
   ───────────────────────────────────────────────────────────── */

.frame {
  font-family: var(--brand-body-font, var(--font-body));
  color: var(--brand-ink, var(--ink-strong));
  background: var(--brand-ground, var(--ground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  box-sizing: border-box;
}
.frame *, .frame *::before, .frame *::after { box-sizing: border-box; }
.frame h1, .frame h2, .frame h3, .frame h4 {
  font-family: var(--brand-heading-font, var(--font-display));
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--brand-ink, var(--ink-strong));
  text-wrap: balance;
}
.frame p { margin: 0; text-wrap: pretty; }
.frame button { font-family: inherit; }

/* photo placeholder — striped, monospace caption */
.photo {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.88 0.01 255) 0 2px,
      oklch(0.92 0.008 255) 2px 14px
    );
  position: relative;
  overflow: hidden;
  color: oklch(0.38 0.01 255);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.photo-navy {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.28 0.04 255) 0 2px,
      oklch(0.32 0.04 255) 2px 14px
    );
  color: oklch(0.82 0.02 255);
}
.photo-warm {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.86 0.015 60) 0 2px,
      oklch(0.90 0.012 60) 2px 14px
    );
  color: oklch(0.38 0.01 60);
}
.photo-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 8px;
  background: oklch(0 0 0 / 0.35);
  color: oklch(1 0 0 / 0.92);
  line-height: 1;
}

/* device frames */
.device-mobile {
  width: 390px;
  background: var(--brand-ground, var(--ground));
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  position: relative;
}
.device-desktop {
  width: 1280px;
  background: var(--brand-ground, var(--ground));
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  position: relative;
}
.status-ios {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink, var(--ink-strong));
}
.status-ios .dots { display: flex; gap: 4px; align-items: center; }
.status-ios .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* primary CTA */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  font: 500 15px/1 var(--brand-body-font, var(--font-body));
  letter-spacing: 0.005em;
  border-radius: var(--brand-corner, var(--r-sharp));
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.btn-primary {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--brand-line);
}
.btn-dark {
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
}

/* progress rail */
.rail {
  height: 2px;
  background: var(--brand-line);
  position: relative;
}
.rail > i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--brand-accent);
  display: block;
}

/* eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-ink-muted);
}

/* field primitive */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink);
  letter-spacing: 0.005em;
}
.field .hint {
  font-size: 12px;
  color: var(--brand-ink-muted);
}
.field input, .field textarea, .field select {
  font: 400 16px/1.4 var(--brand-body-font, var(--font-body));
  padding: 12px 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner, var(--r-sharp));
  background: var(--brand-ground, var(--ground));
  color: var(--brand-ink);
  outline: none;
  width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--brand-ink); }

/* choice chips */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner, var(--r-sharp));
  background: var(--brand-ground);
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-ink);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.choice:hover { border-color: var(--brand-ink); }
.choice.selected {
  border-color: var(--brand-ink);
  background: var(--brand-ground-alt);
}
.choice .key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-ink-muted);
  border: 1px solid var(--brand-line);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}