// ngx-t-forms — Design Tokens (Phase 6 · Visual debt)
// =====================================================
//
// THE single source of truth for every customizable visual value in the
// library. Component SCSS references these via `var(--lib-forms-*)` /
// `var(--sem-*)` and NEVER hardcodes a hex literal (CLAUDE.md §3 Visual;
// MIGRATION_PLAN.md §12). Token files are the one place a hex is allowed —
// here it is only ever a *fallback* behind a Material system variable.
//
// Source of truth for light/dark: Angular Material M3 system variables
// (`--mat-sys-*`). When the consumer sets up `mat.theme()`, these tokens
// inherit the active theme automatically. The hex fallbacks below match
// Material's M3 baseline (purple) so rendering is unchanged when no theme
// is loaded — preserving pre-migration parity (MIGRATION_PLAN.md §12.3).
//
// Re-theming (exit criterion, MIGRATION_PLAN.md §12.4): a consumer overrides
// any `--lib-forms-*` / `--sem-*` on `:root` (or a `.dark` / `[data-theme]`
// scope) in their GLOBAL styles and the whole library re-themes.
//
// USAGE — from the consumer's GLOBAL SCSS entry (e.g. `styles.scss`):
//
//     @use 'ngx-t-forms/styles/tokens';
//
// This is a required integration step (additive, same convention as the
// Material theme and `ngx-t-forms/styles/json-editor-syntax`, DECISIONS.md
// D-012 / D-017).

:root {
  // ---- Surface & text scale (Material M3 neutrals) -----------------------
  --lib-forms-surface:                   var(--mat-sys-surface, #fef7ff);
  --lib-forms-surface-container-lowest:  var(--mat-sys-surface-container-lowest, #ffffff);
  --lib-forms-surface-container-low:     var(--mat-sys-surface-container-low, #f7f2fa);
  --lib-forms-surface-container:         var(--mat-sys-surface-container, #f3edf7);
  --lib-forms-surface-container-high:    var(--mat-sys-surface-container-high, #ece6f0);
  --lib-forms-surface-container-highest: var(--mat-sys-surface-container-highest, #e6e0e9);
  --lib-forms-surface-dim:               var(--mat-sys-surface-dim, #ded8e1);

  --lib-forms-on-surface:                var(--mat-sys-on-surface, #1c1b1f);
  --lib-forms-on-surface-variant:        var(--mat-sys-on-surface-variant, #49454f);

  --lib-forms-outline:                   var(--mat-sys-outline, #79747e);
  --lib-forms-outline-variant:           var(--mat-sys-outline-variant, #cac4d0);

  // ---- Single accent (Material M3 primary) -------------------------------
  --lib-forms-primary:                   var(--mat-sys-primary, #6750a4);
  --lib-forms-on-primary:                var(--mat-sys-on-primary, #ffffff);
  --lib-forms-primary-container:         var(--mat-sys-primary-container, #eaddff);
  --lib-forms-on-primary-container:      var(--mat-sys-on-primary-container, #21005d);

  // ---- Error (structural; mirrors --sem-error) ---------------------------
  --lib-forms-error:                     var(--mat-sys-error, #b3261e);
  --lib-forms-on-error:                  var(--mat-sys-on-error, #ffffff);
  --lib-forms-error-container:           var(--mat-sys-error-container, #f9dedc);
  --lib-forms-on-error-container:        var(--mat-sys-on-error-container, #410e0b);

  // ---- Shadow colour (so component shadows stay tokenised) ---------------
  --lib-forms-shadow-color:              var(--mat-sys-shadow, #000000);

  // ---- Radius (preserves pre-migration values; not a Phase 6 gap) --------
  --lib-forms-radius-sm:   8px;
  --lib-forms-radius-md:   10px;
  --lib-forms-radius-lg:   12px;
  --lib-forms-radius-pill: 999px;

  // ---- Elevation (GDP §17 — wide, soft, monochromatic) -------------------
  --lib-forms-shadow-edge:     0 1px 2px  color-mix(in srgb, var(--lib-forms-shadow-color) 4%,  transparent);
  --lib-forms-shadow-resting:  0 4px 24px color-mix(in srgb, var(--lib-forms-shadow-color) 6%,  transparent);
  --lib-forms-shadow-hover:    0 8px 40px color-mix(in srgb, var(--lib-forms-shadow-color) 10%, transparent);
  --lib-forms-shadow-floating: 0 16px 56px color-mix(in srgb, var(--lib-forms-shadow-color) 14%, transparent);

  // ---- Motion (GDP §16 / L-05) -------------------------------------------
  // The luxury easing: fast start, slow decelerate — never mechanical.
  --lib-forms-easing:          cubic-bezier(0.16, 1, 0.3, 1);
  --lib-forms-duration-hover:  300ms; // hover / border / outline changes
  --lib-forms-duration:        400ms; // entrance / exit / toggle / expand

  // ---- Semantic palette (GDP §2c) — chips / badges / alerts / inline -----
  // Status hues. Never used as structural/decorative colour (SC-01..SC-07).
  --sem-error:    var(--mat-sys-error, #b3261e);
  --sem-success:  #1a6b3a;
  --sem-warning:  #7c5800;
  --sem-info:     #2c4393;
  --sem-premium:  #8b3a00;

  --sem-error-surface:   color-mix(in srgb, var(--sem-error)   10%, var(--lib-forms-surface));
  --sem-success-surface: color-mix(in srgb, var(--sem-success) 10%, var(--lib-forms-surface));
  --sem-warning-surface: color-mix(in srgb, #c87800            10%, var(--lib-forms-surface));
  --sem-info-surface:    color-mix(in srgb, var(--sem-info)    10%, var(--lib-forms-surface));
  --sem-premium-surface: color-mix(in srgb, #c45000            10%, var(--lib-forms-surface));

  // ---- Workflow-state hues (GDP §2c hue map) -----------------------------
  // Amber=user action needed · Red=viewer accountable/blocking ·
  // Rust=someone else blocking · Blue=automated · Emerald=terminal success ·
  // Slate=archived · Charcoal=concurrency lock.
  --sem-amber:    #b06f00;
  --sem-red:      var(--mat-sys-error, #b3261e);
  --sem-rust:     #8a3b1e;
  --sem-blue:     #2c4393;
  --sem-emerald:  #1a6b3a;
  --sem-slate:    #4a5568;
  --sem-charcoal: #3a3a3a;

  --sem-amber-surface:    color-mix(in srgb, var(--sem-amber)    12%, var(--lib-forms-surface));
  --sem-red-surface:      color-mix(in srgb, var(--sem-red)      12%, var(--lib-forms-surface));
  --sem-rust-surface:     color-mix(in srgb, var(--sem-rust)     12%, var(--lib-forms-surface));
  --sem-blue-surface:     color-mix(in srgb, var(--sem-blue)     12%, var(--lib-forms-surface));
  --sem-emerald-surface:  color-mix(in srgb, var(--sem-emerald)  12%, var(--lib-forms-surface));
  --sem-slate-surface:    color-mix(in srgb, var(--sem-slate)    12%, var(--lib-forms-surface));
  --sem-charcoal-surface: color-mix(in srgb, var(--sem-charcoal) 12%, var(--lib-forms-surface));

  // ---- Code / syntax-highlight palette (json-editor; opt-in) -------------
  // VS Code Dark inspired. Consumed by `styles/json-editor-syntax`.
  --lib-forms-code-bg:       #1e1e1e;
  --lib-forms-code-surface:  #252526;
  --lib-forms-code-border:   #3e3e42;
  --lib-forms-code-fg:       #d4d4d4;
  --lib-forms-code-key:      #9cdcfe; // light blue
  --lib-forms-code-string:   #ce9178; // orange/red
  --lib-forms-code-number:   #b5cea8; // light green
  --lib-forms-code-boolean:  #569cd6; // dark blue
  --lib-forms-code-null:     #569cd6; // dark blue
  --lib-forms-code-error:    #f48771; // soft red

  // ---- HTTP method hues (REST / Postman editors) -------------------------
  // Reuse the semantic palette so they adapt in dark mode (SC-* compliant —
  // only ever used as a small method badge, never structural colour).
  --lib-forms-method-get:    var(--sem-emerald, #1a6b3a);
  --lib-forms-method-post:   var(--sem-blue, #2c4393);
  --lib-forms-method-put:    var(--sem-amber, #b06f00);
  --lib-forms-method-patch:  var(--sem-rust, #8a3b1e);
  --lib-forms-method-delete: var(--sem-error, #b3261e);
}

// Dark-mode text overrides (GDP §2c — surfaces adapt via color-mix; only
// the semantic text hues need lightening). Library reacts to a consumer-set
// `.dark` / `[data-theme="dark"]` scope — it never declares the switch itself.
:root.dark,
.dark,
[data-theme='dark'] {
  --sem-success: #4caf82;
  --sem-warning: #e6a817;
  --sem-premium: #d4743a;

  --sem-amber:   #e6a817;
  --sem-rust:    #c5734f;
  --sem-emerald: #4caf82;
  --sem-slate:   #94a3b8;
}