/* ============================================================================
   Cornfield — design system
   Plain CSS, no build step. Tokens + shared components.

   Theming uses CSS-native `color-scheme` + `light-dark()`:
     • `:root { color-scheme: light dark }` follows the OS by default.
     • Each color token is declared once as `light-dark(<light>, <dark>)`.
     • The manual toggle (ui.js) sets `data-theme="light|dark"`, which we map
       onto `color-scheme` to pin one side — no palette duplication.

   Cascade layers order (low → high priority):
     reset → tokens → base → components → utilities
   Everything author-written is layered, so JS inline styles (e.g. field-box
   positions) and utilities always win where intended.
   ========================================================================== */

@layer reset, tokens, base, components, utilities;

/* ------------------------------------------------------------------ tokens */

@layer tokens {
  :root {
    color-scheme: light dark;

    /* spacing (4px scale) */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
            "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

    /* type scale */
    --fs-caption: 12px;
    --fs-sm: 13px;
    --fs-body: 14px;
    --fs-lg: 16px;
    --fs-h3: 18px;
    --fs-h2: 22px;
    --fs-display: 30px;

    /* surfaces & text — light value first, dark value second */
    --bg:            light-dark(#f7f7f5, #16150f);
    --surface:       light-dark(#ffffff, #201e17);
    --surface-2:     light-dark(#fbfaf8, #2a271e);
    --border:        light-dark(#e7e4de, #35322a);
    --border-strong: light-dark(#d6d2c8, #47433a);
    --text:          light-dark(#1c1a15, #f2efe6);
    --text-2:        light-dark(#5f5a50, #bdb8a9);
    /* theme-aware: the light value must clear WCAG AA (4.5:1) on --bg, which the
       old single #8b857a did not (~3.4:1). #6b6558 on #f7f7f5 ≈ 5.4:1. */
    --text-3:        light-dark(#6b6558, #8b857a);

    /* accent — amber-600 "cornfield" gold */
    --accent:          light-dark(#d97706, #f59e0b);
    --accent-hover:    light-dark(#b45f05, #fbbf24);
    /* button-background variant: amber-700 in light so white label text clears AA
       (white on amber-600 is ~3.2:1; on amber-700 ≈ 5:1). Accents/links keep amber-600. */
    --accent-strong:   light-dark(#b45309, #f59e0b);
    --accent-soft:     light-dark(#fdf1dd, #3a2c12);
    --accent-contrast: light-dark(#ffffff, #1c1500);

    /* status */
    --ok:   light-dark(#15803d, #4ade80);  --ok-soft:   light-dark(#e7f6ec, #16351f);
    --warn: light-dark(#b45309, #fbbf24);  --warn-soft: light-dark(#fbeed3, #3a2c12);
    --err:  light-dark(#b91c1c, #f87171);  --err-soft:  light-dark(#fbe6e6, #3a1a1a);

    /* field-type colors (shared: badges, legend, editor overlay) */
    --ft-text:   light-dark(#2563eb, #60a5fa);  --ft-text-soft:   light-dark(#e6efff, #17233b);
    --ft-choice: light-dark(#7c3aed, #a78bfa);  --ft-choice-soft: light-dark(#f0e9ff, #241a3b);
    --ft-radio:  light-dark(#db2777, #f472b6);  --ft-radio-soft:  light-dark(#fce7f0, #331124);
    --ft-sign:   light-dark(#0d9488, #2dd4bf);  --ft-sign-soft:   light-dark(#dcf5f1, #10312d);

    /* elevation & focus — only the color differs per theme */
    --shadow-sm: 0 1px 2px  light-dark(rgba(20, 18, 12, 0.06), rgba(0, 0, 0, 0.4));
    --shadow:    0 4px 16px light-dark(rgba(20, 18, 12, 0.08), rgba(0, 0, 0, 0.5));
    --shadow-lg: 0 12px 40px light-dark(rgba(20, 18, 12, 0.16), rgba(0, 0, 0, 0.6));

    --focus: 0 0 0 3px light-dark(rgba(217, 119, 6, 0.35), rgba(245, 158, 11, 0.4));
  }

  /* Manual toggle pins one side; `color-scheme` is inherited so light-dark()
     resolves consistently on every element. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

/* ------------------------------------------------------------------ reset */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  /* The UA's `[hidden] { display: none }` loses to any author `display` rule — so
     `.btn`, `.pill`, etc. stayed visible when JS set `hidden`. Make the attribute
     mean what it says, everywhere. */
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ base */

@layer base {
  body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
  }

  h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}

/* ------------------------------------------------------------------ components */

@layer components {

  /* top bar */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--s4);
    padding: var(--s3) var(--s6);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--fs-h3); }
  .brand .logo { font-size: 22px; }
  .brand .accent { color: var(--accent); }
  .topbar .spacer { flex: 1; }

  .container { max-width: 1180px; margin: 0 auto; padding: var(--s8) var(--s6); }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    font: inherit; font-weight: 600; font-size: var(--fs-body);
    padding: var(--s2) var(--s4); min-height: 38px;
    border-radius: var(--radius); border: 1px solid transparent;
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, transform .06s ease, box-shadow .16s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: none; box-shadow: var(--focus); }
  .btn[disabled] { opacity: .55; cursor: not-allowed; }

  .btn-primary { background: var(--accent-strong); color: var(--accent-contrast); }
  .btn-primary:hover:not([disabled]) { background: var(--accent-hover); }

  .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
  .btn-secondary:hover:not([disabled]) { background: var(--surface-2); }

  .btn-ghost { background: transparent; color: var(--text-2); }
  .btn-ghost:hover:not([disabled]) { background: var(--surface-2); color: var(--text); }

  .btn-danger { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
  .btn-danger:hover:not([disabled]) { background: var(--err-soft); }

  .btn-sm { min-height: 30px; padding: var(--s1) var(--s3); font-size: var(--fs-sm); }
  .btn-icon { min-height: 34px; min-width: 34px; padding: 0 var(--s2); }

  .btn .spinner { width: 15px; height: 15px; }
  .btn.loading { pointer-events: none; }
  .btn.loading .label { opacity: .6; }

  /* inputs */
  .field { display: flex; flex-direction: column; gap: var(--s2); }
  .field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
    font: inherit; color: var(--text);
    padding: var(--s2) var(--s3); min-height: 40px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius); transition: border-color .16s, box-shadow .16s;
    width: 100%;
  }
  input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }

  .checkbox { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); cursor: pointer; }

  /* range slider */
  input[type="range"] { width: 100%; accent-color: var(--accent); }

  /* pills / badges */
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-caption); font-weight: 600;
    padding: 3px 10px; border-radius: var(--radius-full);
    border: 1px solid transparent; line-height: 1.4;
  }
  .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .pill-processing { color: var(--warn); background: var(--warn-soft); }
  .pill-processing .dot { animation: pulse 1.2s ease-in-out infinite; }
  .pill-ready { color: var(--ok); background: var(--ok-soft); }
  .pill-error { color: var(--err); background: var(--err-soft); }

  .ft-badge { font-size: var(--fs-caption); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); }
  .ft-TextBox { color: var(--ft-text); background: var(--ft-text-soft); }
  .ft-ChoiceButton { color: var(--ft-choice); background: var(--ft-choice-soft); }
  .ft-RadioButton { color: var(--ft-radio); background: var(--ft-radio-soft); }
  .ft-Signature { color: var(--ft-sign); background: var(--ft-sign-soft); }

  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

  /* avatar */
  .avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--accent), #ea9c3b);
    flex-shrink: 0;
  }

  /* spinner */
  .spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor; border-radius: 50%;
    animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* theme toggle */
  .theme-toggle {
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-2);
    width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
    transition: background .16s, color .16s;
  }
  .theme-toggle:hover { background: var(--surface-2); color: var(--text); }

  /* user menu */
  .usermenu { position: relative; }
  .usermenu-trigger { display: inline-flex; align-items: center; gap: var(--s2); background: transparent;
    border: none; cursor: pointer; color: var(--text); font: inherit; padding: var(--s1); border-radius: var(--radius); }
  .usermenu-trigger:hover { background: var(--surface-2); }
  .usermenu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: var(--s2); display: none; z-index: 50;
  }
  .usermenu-panel.open { display: block; }
  .usermenu-panel .email { padding: var(--s2) var(--s3); font-size: var(--fs-sm); color: var(--text-3); border-bottom: 1px solid var(--border); margin-bottom: var(--s2); word-break: break-all; }

  /* toasts */
  .toast-region { position: fixed; bottom: var(--s6); right: var(--s6); z-index: 100; display: flex; flex-direction: column; gap: var(--s2); }
  .toast {
    display: flex; align-items: center; gap: var(--s3);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: var(--s3) var(--s4); min-width: 260px; max-width: 380px;
    animation: toast-in .22s ease;
  }
  .toast.ok { border-left-color: var(--ok); }
  .toast.err { border-left-color: var(--err); }
  .toast .toast-msg { flex: 1; }
  .toast-close {
    background: transparent; border: none; color: var(--text-3); cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0 2px; flex-shrink: 0;
  }
  .toast-close:hover { color: var(--text); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* dialog */
  .dialog-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90;
    display: flex; align-items: center; justify-content: center; padding: var(--s4);
  }
  .dialog {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: var(--s6); max-width: 420px; width: 100%;
    animation: toast-in .18s ease;
  }
  .dialog h3 { margin-bottom: var(--s2); }
  .dialog p { color: var(--text-2); margin: 0 0 var(--s5); }
  .dialog .actions { display: flex; justify-content: flex-end; gap: var(--s2); }

  .error-banner { background: var(--err-soft); color: var(--err); border-radius: var(--radius); padding: var(--s3) var(--s4); font-size: var(--fs-sm); }
}

/* ------------------------------------------------------------------ utilities */

@layer utilities {
  .muted { color: var(--text-3); }
  .row { display: flex; align-items: center; gap: var(--s3); }
  .hidden { display: none !important; }
  /* visually hidden but available to assistive tech (e.g. live-region announcements) */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}