/**
 * Clairon — single source of design tokens (all UIs).
 * Matches Clairon Ops UI style guide (warm surfaces, teal brand, sienna accent).
 * Load via /design-system/design-tokens.css
 */

:root {
  /* --- Canonical palette (Ops style guide) --- */
  --brand: #214e59;
  --brand-dark: #163540;
  --brand-text: #214e59;
  --secondary: #c84b11;
  --secondary-dark: #a33a0a;
  --bg-page: #faf9f7;
  --bg-card: #fffdfc;
  --bg-inset: #f5f4f2;
  --bg-hover: #f0efed;
  --border-faint: #eae8e5;
  --border-subtle: #dddad6;
  --border-medium: #c4c1bc;
  --border-strong: #a8a5a0;
  --border-nested: #e0ddda;
  --text-primary: #1a1917;
  --text-secondary: #565451;
  --text-muted: #857f7b;
  --text-hint: #aeaaa6;
  --danger: #a32d2d;
  --danger-light: #f7c1c1;
  --danger-bg: #fcebeb;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-card: 4px;
  --radius-pill: 999px;

  --shadow-dd: 0 4px 16px rgba(26, 25, 23, 0.12);

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Display: Adobe Fonts (Typekit kit); load https://use.typekit.net/mic4vua.css in HTML shells */
  --font-display: itc-franklin-gothic-lt-pro, sans-serif;
  --font-sans: var(--font-ui);
  /* Body copy across apps (use Inter; avoids invalid var() falling back to UA serif). */
  --font-body: var(--font-ui);

  /* --- Type scale (named roles — Ops guide) --- */
  --type-label-size: 10px;
  --type-label-weight: 600;
  --type-label-tracking: 0.5px;
  --type-label-transform: uppercase;

  --type-caption-size: 11px;
  --type-caption-weight: 400;

  --type-body-sm-size: 12px;
  --type-body-sm-weight: 400;

  --type-body-size: 13px;
  --type-body-weight: 400;

  --type-body-emphasis-size: 13px;
  --type-body-emphasis-weight: 500;

  /* Card title (all apps): 15px Franklin, default tracking */
  --type-card-title-size: 15px;
  --type-card-title-weight: 500;
  --type-card-title-tracking: 0;
  --type-card-title-transform: none;
  --type-card-title-font-family: var(--font-display);

  --type-ui-medium-size: 18px;
  --type-ui-medium-weight: 500;
  --type-ui-medium-tracking: 0;
  --type-ui-medium-font-family: var(--font-display);

  /* Styleguide / page section title (ITC Franklin Gothic) */
  --type-page-heading-size: 24px;
  --type-page-heading-weight: 400;
  --type-page-heading-tracking: 0;

  --type-link-size: 13px;
  --type-link-weight: 400;

  /* Aliases used across legacy CSS */
  --type-micro-size: 9px;
  --type-xs-size: 10px;
  --type-xs-weight: 600;
  --type-xs-tracking: 0.5px;
  --type-xs-transform: uppercase;
  --type-sm-size: 11px;
  --type-sm-weight: 500;
  --type-base-size: 12px;
  --type-base-weight: 400;
  --type-md-size: 13px;
  --type-md-weight: 400;
  --type-lg-size: 14px;
  --type-lg-weight: 500;
  --type-lg-tracking: -0.02em;
  --type-xl-size: 15px;
  --type-xl-weight: 500;
  --type-xl-tracking: -0.02em;

  --type-display-xs-size: 16px;
  --type-display-xs-weight: 600;
  --type-display-sm-size: 17px;
  --type-display-sm-weight: 500;
  --type-display-md-size: 18px;
  --type-display-md-weight: 600;
  --type-display-lg-size: 20px;
  --type-display-lg-weight: 700;
  --type-display-xl-size: 22px;
  --type-display-xl-weight: 700;
  --type-display-2xl-size: 24px;
  --type-display-2xl-weight: 400;
  --type-display-3xl-size: 28px;
  --type-display-3xl-weight: 500;
  --type-display-4xl-size: 32px;
  --type-display-4xl-weight: 600;
  --type-display-5xl-size: 36px;
  --type-display-5xl-weight: 800;

  --type-field-label-size: var(--type-label-size);
  --type-field-label-weight: var(--type-label-weight);
  --type-field-label-tracking: var(--type-label-tracking);
  --type-field-label-transform: var(--type-label-transform);
  --type-field-label-margin-bottom: 2px;

  --type-field-value-size: var(--type-body-size);
  --type-field-value-weight: 400;
  --type-field-value-tracking: -0.01em;

  /* Section eyebrow (e.g. quote SEC TITLE) — distinct from field label */
  --type-section-eyebrow-size: var(--type-md-size);
  --type-section-eyebrow-weight: 500;
  --type-section-eyebrow-tracking: 0;
  --type-section-eyebrow-transform: uppercase;
  --type-section-title-size: var(--type-section-eyebrow-size);
  --type-section-title-weight: var(--type-section-eyebrow-weight);
  --type-section-title-tracking: var(--type-section-eyebrow-tracking);
  --type-section-title-transform: var(--type-section-eyebrow-transform);

  /* Legacy radius names (ops R.lg / quote) */
  --radius-base: var(--radius-md);
  --radius-lg: var(--radius-card);
  --radius-xl: var(--radius-md);

  --field-grid-columns: 1fr 1fr;
  --field-grid-gap-row: 10px;
  --field-grid-gap-col: 24px;

  /* Tinted UI (no brand-light / secondary-light tokens) */
  --badge-informative-bg: color-mix(in srgb, var(--brand) 15%, var(--bg-card));
  --badge-informative-fg: var(--brand);
  --badge-early-bg: color-mix(in srgb, var(--secondary) 12%, var(--bg-card));
  --badge-early-fg: var(--secondary-dark);
  --badge-late-bg: var(--danger-bg);
  --badge-late-fg: var(--danger);
  --badge-completed-bg: var(--brand);
  --badge-completed-fg: #ffffff;

  --badge-radius: var(--radius-xs);
  --badge-padding-y: 2px;
  --badge-padding-x: 7px;

  /* --- Legacy --cl-* (maps to guide; ops / quote JS may reference) --- */
  --cl-ink: var(--text-primary);
  --cl-ink-soft: var(--text-secondary);
  --cl-muted: var(--text-muted);
  --cl-faint: var(--text-hint);
  --cl-page: var(--bg-page);
  --cl-page-deep: var(--bg-inset);
  --cl-surface: var(--bg-card);
  --cl-surface-warm: var(--bg-inset);
  --cl-border: var(--border-subtle);
  --cl-border-strong: var(--border-medium);
  --cl-accent: var(--brand);
  --cl-accent-dark: var(--brand-dark);
  --cl-accent-light: color-mix(in srgb, var(--brand) 14%, var(--bg-card));
  --cl-warn: var(--secondary);
  --cl-warn-light: color-mix(in srgb, var(--secondary) 12%, var(--bg-card));
  --cl-notice: var(--secondary-dark);
  --cl-notice-light: color-mix(in srgb, var(--secondary-dark) 10%, var(--bg-card));
  --cl-flag: var(--danger);
  --cl-flag-light: var(--danger-bg);
  --cl-on-dark: #ffffff;
  /* Text / icons on brand or dark fills */
  --text-on-brand: #ffffff;
  --cl-success-solid: #16a34a;
  --cl-success-border: #15803d;

  /* --- Portal semantic aliases --- */
  --color-background-primary: var(--bg-card);
  --color-background-secondary: var(--bg-page);
  --color-background-tertiary: var(--bg-inset);
  --color-background-info: var(--badge-informative-bg);
  --color-background-success: var(--badge-informative-bg);
  --color-background-warning: var(--badge-early-bg);
  --color-background-danger: var(--danger-bg);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-hint);
  --color-text-info: var(--secondary);
  --color-text-info-strong: var(--secondary-dark);
  --color-text-success: var(--brand-text);
  --color-text-warning: var(--secondary-dark);
  --color-text-danger: var(--danger);

  --color-border-primary: var(--brand);
  --color-border-secondary: var(--border-medium);
  --color-border-tertiary: var(--border-faint);
  --color-border-info: var(--brand);
  --color-border-warning: var(--border-medium);
  --color-border-danger: var(--danger-light);

  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-card);

  --surface-page: var(--bg-page);
  --surface-deep: var(--bg-inset);
  --surface-elevated: var(--bg-card);
  --surface-warm: var(--bg-inset);
  --text-faint: var(--text-hint);
  --border-default: var(--border-subtle);

  /* Card / nested borders: match surface; enhanced with L−3% where supported (see EOF) */
  --border-on-elevated: var(--border-subtle);
  --border-on-inset: var(--border-nested);
  --border-on-hover: var(--border-medium);

  --border-notice-mix-strong: color-mix(in srgb, var(--secondary) 40%, transparent);
  --border-notice-mix: color-mix(in srgb, var(--secondary) 35%, transparent);
  --border-notice-mix-soft: color-mix(in srgb, var(--secondary) 30%, transparent);

  --cl-logo-height: 40px;
  --cl-logo-max-width: 200px;

  /* Do / don’t pattern (guide) */
  --do-bg: #f0fdf4;
  --do-border: #86efac;
  --do-text: #16a34a;
  --dont-bg: #fff5f5;
  --dont-border: #fca5a5;
  --dont-text: #dc2626;

  /* Toggle “on” (quote) — extension token */
  --toggle-on: var(--cl-success-solid);

  /* Fullscreen / modal scrims */
  --overlay-scrim: rgba(0, 0, 0, 0.88);
  --overlay-scrim-soft: rgba(0, 0, 0, 0.35);
  --modal-scrim: rgba(0, 0, 0, 0.45);
}

@supports (color: hsl(from #fffdfc h s calc(l - 3%))) {
  :root {
    --border-on-elevated: hsl(from var(--surface-elevated) h s calc(l - 3%));
    --border-on-inset: hsl(from var(--surface-deep) h s calc(l - 3%));
    --border-on-hover: hsl(from var(--bg-hover) h s calc(l - 3%));
  }
}