/* ============================================================
   Trunex Design System v2.2 — Canonical Tokens
   Source: design_v2/prototype/tokens.css (Cloud Design V2.1)
   Generated by F2 Tokens Port — Foundation V2
   Date: 2 May 2026
   Per R-001 v1.18 (Trunex main only) and R-057
   Do NOT edit values directly. Update by re-porting from design_v2/.
   ============================================================ */

:root {
  /* === Brand Identity (Orange) === */
  --tx-orange:        #FF6B00;
  --tx-orange-dark:   #C44E0D;
  --tx-orange-pale:   #FFE3CE;
  --tx-orange-glow:   rgba(255, 107, 0, 0.32);

  /* === Cool Grey Neutrals (Dark Theme) === */
  --tx-warm-dark:     #11141A;
  --tx-warm-deep:     #0A0C10;
  --tx-warm-mid:      #1A1E26;
  --tx-warm-elev:     #232833;
  --tx-warm-line:     #2A3140;
  --tx-warm-line-soft:#1F242E;
  --tx-warm-off:      #F2F4F7;
  --tx-neutral-mid:   #6E7689;
  --tx-neutral-soft:  #9098A8;
  --tx-white:         #FFFFFF;

  /* === Trust Blue (Secondary Accent) === */
  --tx-trust-blue:        #4F8FD9;
  --tx-trust-blue-soft:   #7FB0E8;
  --tx-trust-blue-deep:   #2E5FA3;
  --tx-trust-blue-tint:   rgba(79, 143, 217, 0.16);
  --tx-trust-blue-border: rgba(79, 143, 217, 0.45);

  /* === Translucent Glass Surfaces === */
  --tx-glass-fill:        rgba(79, 143, 217, 0.18);
  --tx-glass-fill-strong: rgba(79, 143, 217, 0.28);
  --tx-glass-fill-light:  rgba(79, 143, 217, 0.10);
  --tx-glass-border:      rgba(127, 176, 232, 0.32);
  --tx-glass-border-soft: rgba(127, 176, 232, 0.18);
  --tx-glass-blur:        blur(28px) saturate(160%);
  --tx-glass-blur-light:  blur(14px) saturate(140%);

  /* Tinted glass for active states */
  --tx-tint-orange-bg:       rgba(255, 107, 0, 0.14);
  --tx-tint-orange-bg-2:     rgba(255, 107, 0, 0.22);
  --tx-tint-orange-border:   rgba(255, 107, 0, 0.55);
  --tx-tint-orange-fg:       #FFB87A;
  --tx-tint-blue-bg:         rgba(79, 143, 217, 0.18);
  --tx-tint-blue-bg-2:       rgba(79, 143, 217, 0.28);
  --tx-tint-blue-border:     rgba(127, 176, 232, 0.50);
  --tx-tint-blue-fg:         #B5D4F2;
  --tx-tint-success-bg:      rgba(127, 207, 153, 0.16);
  --tx-tint-success-fg:      #B5E0C3;
  --tx-tint-critical-bg:     rgba(229, 68, 59, 0.14);
  --tx-tint-critical-border: rgba(229, 68, 59, 0.45);
  --tx-tint-critical-fg:     #F5A8A2;

  /* === Status Colors === */
  --tx-success:           #5AB37A;
  --tx-success-soft:      #7FCF99;
  --tx-success-tint:      rgba(127, 207, 153, 0.16);
  --tx-warning:           #E8A93C;
  --tx-warning-tint:      rgba(232, 169, 60, 0.18);
  --tx-critical:          #E5443B;
  --tx-critical-soft:     #FF6B5C;
  --tx-critical-glow:     rgba(229, 68, 59, 0.40);

  /* === Spacing, Radius, Motion (and other) === */
  /* Overlays */
  --tx-overlay-modal:   rgba(8, 10, 14, 0.72);
  --tx-overlay-sheet:   rgba(8, 10, 14, 0.60);
  --tx-overlay-hover:   rgba(242, 244, 247, 0.05);
  --tx-overlay-pressed: rgba(242, 244, 247, 0.08);

  /* Typography */
  --tx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --tx-fs-display: 32px;  --tx-lh-display: 1.15;  --tx-fw-display: 700;
  --tx-fs-h1:      24px;  --tx-lh-h1:      1.25;  --tx-fw-h1:      700;
  --tx-fs-h2:      19px;  --tx-lh-h2:      1.35;  --tx-fw-h2:      600;
  --tx-fs-h3:      15px;  --tx-lh-h3:      1.4;   --tx-fw-h3:      600;
  --tx-fs-body:    15px;  --tx-lh-body:    1.55;  --tx-fw-body:    400;
  --tx-fs-body-sm: 13px;  --tx-lh-body-sm: 1.5;   --tx-fw-body-sm: 400;
  --tx-fs-label:   12px;  --tx-lh-label:   1.4;   --tx-fw-label:   500;
  --tx-fs-caption: 11px;  --tx-lh-caption: 1.4;   --tx-fw-caption: 400;
  --tx-fs-button:  15px;  --tx-lh-button:  1.0;   --tx-fw-button:  600;

  /* Spacing (4px base) */
  --tx-space-0: 0; --tx-space-1: 4px; --tx-space-2: 8px; --tx-space-3: 12px;
  --tx-space-4: 16px; --tx-space-5: 20px; --tx-space-6: 24px; --tx-space-8: 32px;
  --tx-space-10: 40px; --tx-space-12: 48px; --tx-space-16: 64px;
  --tx-screen-px: 20px;

  /* Radius */
  --tx-radius-xs: 4px; --tx-radius-sm: 8px; --tx-radius-md: 12px;
  --tx-radius-lg: 16px; --tx-radius-xl: 24px; --tx-radius-full: 999px;

  /* Elevation */
  --tx-shadow-none:  none;
  --tx-shadow-low:   0 2px 8px rgba(8,10,14,0.45);
  --tx-shadow-mid:   0 10px 30px rgba(8,10,14,0.55);
  --tx-shadow-high:  0 24px 70px rgba(8,10,14,0.70);
  --tx-shadow-glow:  0 6px 24px var(--tx-orange-glow);
  --tx-shadow-sos:   0 8px 28px var(--tx-critical-glow);
  --tx-shadow-blue:  0 6px 24px rgba(79,143,217,0.30);

  /* Motion */
  --tx-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --tx-ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --tx-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --tx-dur-press:   100ms;
  --tx-dur-hover:   150ms;
  --tx-dur-modal:   240ms;
  --tx-dur-screen:  280ms;
  --tx-dur-sos:     1500ms;
}

/* ============== F6.5a SEMANTIC THEME LAYER ============================ */
/* Semantic aliases that resolve differently per theme.                   */
/* Components should reference these (--tx-bg, --tx-fg) NOT physical names */
/* (--tx-warm-dark, --tx-warm-off) so theme switching works automatically. */

/* Light theme = default in :root */
:root {
  /* Surfaces */
  --tx-bg:                  #FFFFFF;
  --tx-bg-elev:             #F8F9FA;
  --tx-surface:             #FFFFFF;
  --tx-surface-glass:       rgba(255, 255, 255, 0.72);
  --tx-overlay-hover:       rgba(28, 20, 16, 0.04);

  /* Text */
  --tx-fg:                  #1C1410;
  --tx-text-primary:        #1C1410;
  --tx-text-secondary:      #5A4F47;
  --tx-text-tertiary:       #8A8078;

  /* Borders and dividers */
  --tx-border:              #E8DFD4;
  --tx-border-strong:       #D4C7B8;
  --tx-divider:             #F1ECE4;

  /* Orange accent tints (theme-aware backgrounds) */
  --tx-tint-orange-bg:        #FFF4EA;
  --tx-tint-orange-bg-strong: #FFE3CE;

  /* Brand accent semantic alias - components reference this for accent-coloured */
  /* states. Theme-invariant in default brand; per-theme overrides (e.g. PCR)    */
  /* may re-point this to a non-orange value.                                    */
  --tx-accent:              var(--tx-orange);
}

/* Dark theme override */
[data-theme="dark"] {
  /* Surfaces */
  --tx-bg:                  #11141A;
  --tx-bg-elev:             #1A1F26;
  --tx-surface:             #1E2530;
  --tx-surface-glass:       rgba(30, 37, 48, 0.72);
  --tx-overlay-hover:       rgba(255, 255, 255, 0.06);

  /* Text */
  --tx-fg:                  #F2F4F7;
  --tx-text-primary:        #F2F4F7;
  --tx-text-secondary:      #B8BFC9;
  --tx-text-tertiary:       #9098A8;

  /* Borders and dividers */
  --tx-border:              #2D3540;
  --tx-border-strong:       #3D4A5C;
  --tx-divider:             #232932;

  /* Orange accent tints (theme-aware backgrounds) */
  --tx-tint-orange-bg:        rgba(255, 107, 0, 0.10);
  --tx-tint-orange-bg-strong: rgba(255, 107, 0, 0.20);
}

/* OS-preference fallback when no explicit [data-theme] is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tx-bg:                  #11141A;
    --tx-bg-elev:             #1A1F26;
    --tx-surface:             #1E2530;
    --tx-surface-glass:       rgba(30, 37, 48, 0.72);
    --tx-overlay-hover:       rgba(255, 255, 255, 0.06);
    --tx-fg:                  #F2F4F7;
    --tx-text-primary:        #F2F4F7;
    --tx-text-secondary:      #B8BFC9;
    --tx-text-tertiary:       #9098A8;
    --tx-border:              #2D3540;
    --tx-border-strong:       #3D4A5C;
    --tx-divider:             #232932;
    --tx-tint-orange-bg:        rgba(255, 107, 0, 0.10);
    --tx-tint-orange-bg-strong: rgba(255, 107, 0, 0.20);
  }
}