/* ======================
   WSForm Tokens
   ====================== */

/* ===== Default (light) scheme ===== */
.wsf-form {
  /* Brand & text roles */
  --c-primary:   #000000;  /* brand/cta */
  --c-secondary: #333333;  /* labels/headings */
  --c-accent:    #000000;  /* required, emphasis */

  /* Surfaces */
  --c-bg:        #ffffff;  /* page/panel background */
  --c-base:      #f0f0f0;  /* fields, cards, muted surface */
  --c-surface:   #f7f7f7;  /* buttons, highlights */

  /* Text & lines */
  --c-on-surface:#000000;  /* text/icons on button surface */
  --c-neutral:   #444444;  /* field text */
  --c-border:    #666666;  /* control borders */
  --c-muted:     #999999;  /* subtle outlines/focus */

  /* ===== Typography (scheme) ===== */
  --t-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --t-size-xs: 0.8rem;
  --t-size-sm: 0.9rem;
  --t-size-md: 1rem;
  --t-size-lg: 1.125rem;
  --t-size-xl: 1.25rem;

  --t-weight-regular: 400;
  --t-weight-medium: 500;
  --t-weight-semibold: 600;
  --t-weight-bold: 700;

  --t-leading-tight: 1.2;
  --t-leading-normal: 1.5;
  --t-letter-spacing: 0;

  /* ===== Component tokens (mapped) ===== */
  /* Form */
  --form-bg: var(--c-bg);
  --form-font-family: var(--t-font-family);

  /* Fields */
  --field-bg: var(--c-base);
  --field-text: var(--c-neutral);
  --field-border-color: var(--c-border);
  --field-border-width: 1px;
  --field-pad-block: .6em;
  --field-pad-inline: .75em;
  --field-font-size: var(--t-size-md);
  --field-font-weight: var(--t-weight-regular);
  --field-line-height: var(--t-leading-normal);
  --field-letter-spacing: var(--t-letter-spacing);

  /* Single-line control sizing */
  --control-line-height: 1.3;
  --control-height: calc(
    var(--field-font-size) * var(--control-line-height)
    + (var(--field-pad-block) * 2)
    + (var(--field-border-width) * 2)
  );
  --select-trim-block: .10em;

  /* Labels & required */
  --label-text: var(--c-secondary);
  --label-bg: transparent;
  --label-border-color: transparent;
  --label-border-width: 0;
  --label-font-size: var(--t-size-md);
  --label-font-weight: var(--t-weight-medium);
  --label-line-height: var(--t-leading-tight);

  --req-asterisk-color: var(--c-accent);
  --req-asterisk-scale: 2;

  /* Button */
  --btn-width: 100%;
  --btn-min-width: 300px;
  --btn-max-width: 300px;
  --btn-pad-block: 1em;
  --btn-fg: var(--c-on-surface);
  --btn-bg: var(--c-surface);
  --btn-border-color: var(--c-primary);
  --btn-border-width: 1px;
  --btn-radius: 2em;
  --btn-transition: transform .3s ease;
  --btn-transform-origin: center;

  --btn-hover-fg: var(--c-surface);
  --btn-hover-bg: var(--c-primary);
  --btn-hover-border-color: var(--c-primary);
  --btn-hover-scale: 1.05;

  --btn-font-size: var(--t-size-md);
  --btn-font-weight: var(--t-weight-semibold);
  --btn-text-transform: none;
  --btn-text-decoration: none;
  --btn-letter-spacing: var(--t-letter-spacing);

  /* Consent / feedback */
  --consent-font-size: var(--t-size-sm);
  --feedback-font-size: var(--t-size-sm);
}

/* ===== Dark scheme ===== */
.wsf-form[data-theme="dark"],
[data-theme="dark"] .wsf-form {
  --c-primary:   #f5f5f5;
  --c-secondary: #cfcfcf;
  --c-accent:    #ffffff;

  --c-bg:        #111111;
  --c-base:      #151515;
  --c-surface:   #1a1a1a;

  --c-on-surface:#f5f5f5;
  --c-neutral:   #bbbbbb;
  --c-border:    #666666;
  --c-muted:     #888888;
}

/* ===== Auto (system preference) ===== */
@media (prefers-color-scheme: dark) {
  .wsf-form[data-theme="auto"],
  [data-theme="auto"] .wsf-form {
    --c-primary:   #f5f5f5;
    --c-secondary: #cfcfcf;
    --c-accent:    #ffffff;

    --c-bg:        #111111;
    --c-base:      #151515;
    --c-surface:   #1a1a1a;

    --c-on-surface:#f5f5f5;
    --c-neutral:   #bbbbbb;
    --c-border:    #666666;
    --c-muted:     #888888;
  }
}