/* ─────────────────────────────────────────────────────────────────────────
   GT Nexus Design Token Foundation  (GT4-419)
   Single source of truth for all --gt-*, --nx-*, and scale tokens.
   Do NOT put layout rules or utility classes here — tokens only.
   ───────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Font family ────────────────────────────────────────────────────── */
  --gt-font-family-base: system-ui, ui-sans-serif, sans-serif;

  /* ── Font weights ───────────────────────────────────────────────────── */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* ── Line heights ───────────────────────────────────────────────────── */
  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ── Letter spacing ─────────────────────────────────────────────────── */
  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;

  /* ── Text size scale ────────────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;

  /* ── Type role bundles (size + weight + line-height + letter-spacing) ── */
  --type-display-size:   var(--text-2xl);
  --type-display-weight: var(--font-weight-semibold);
  --type-display-lh:     var(--line-height-tight);
  --type-display-ls:     var(--letter-spacing-tight);

  --type-heading-size:   var(--text-lg);
  --type-heading-weight: var(--font-weight-semibold);
  --type-heading-lh:     var(--line-height-tight);
  --type-heading-ls:     var(--letter-spacing-tight);

  --type-title-size:   var(--text-md);
  --type-title-weight: var(--font-weight-medium);
  --type-title-lh:     var(--line-height-tight);
  --type-title-ls:     var(--letter-spacing-normal);

  --type-body-size:   var(--text-base);
  --type-body-weight: var(--font-weight-normal);
  --type-body-lh:     var(--line-height-normal);
  --type-body-ls:     var(--letter-spacing-normal);

  --type-label-size:   var(--text-sm);
  --type-label-weight: var(--font-weight-medium);
  --type-label-lh:     var(--line-height-tight);
  --type-label-ls:     var(--letter-spacing-wide);

  --type-caption-size:   var(--text-xs);
  --type-caption-weight: var(--font-weight-normal);
  --type-caption-lh:     var(--line-height-normal);
  --type-caption-ls:     var(--letter-spacing-normal);

  /* ── Spacing scale ──────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Spacing aliases (--gt-spacing-* for code that uses this notation) */
  --gt-spacing-xs: var(--space-1);
  --gt-spacing-sm: var(--space-2);
  --gt-spacing-md: var(--space-3);
  --gt-spacing-lg: var(--space-4);
  --gt-spacing-xl: var(--space-6);

  /* ── Icon size scale ────────────────────────────────────────────────── */
  --icon-xs:           12px;
  --icon-sm:           16px;
  --icon-md:           20px;
  --icon-lg:           24px;
  --icon-xl:           32px;
  --icon-touch-target: 32px;

  /* ── Border radius ──────────────────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* ── Brand colors ───────────────────────────────────────────────────── */
  --gt-brand-primary:   #03b2e1;
  --gt-brand-secondary: #fd9f15;

  /* ── Semantic colors ────────────────────────────────────────────────── */
  --gt-danger:           #b3261e;
  --gt-success:          #2e7d32;
  --gt-accent-divider:   #F0CC72;
  --gt-drag-handle:      #245d63;
  --gt-drop-zone-idle:   rgba(73, 25, 185, 0.1);
  --gt-drop-zone-active: #00b2e3;

  /* ── Extended semantic colors ───────────────────────────────────────────── */
  /* Info state (light blue tones) */
  --gt-info-bg:     #d6f2fb;
  --gt-info-border: #9ed9f0;
  --gt-info-text:   #005e78;
  /* Olive-green accent (borders/badges — distinct from --gt-success) */
  --gt-success-text: #4a7100;
  /* Header/title darkest near-black */
  --gt-header-title-color: #161513;

  /* ── Semantic status pairs (background + text) ──────────────────────── */
  --color-success-bg:   #e8f5e9;
  --color-success-text: #2e7d32;
  --color-error-bg:     #fce4e4;
  --color-error-text:   #b3261e;
  --color-warning-bg:   #fff8e1;
  --color-warning-text: #6d4c00;
  --color-info-bg:      #e1f5fe;
  --color-info-text:    #0277bd;

  /* ── OJ core token aliases (base forms not defined by OJ Redwood theme) ── */
  --oj-core-bg-color:     var(--oj-core-bg-color-content);
  --oj-core-border-color: var(--oj-core-border-color-enabled);

  /* ── Page / surface backgrounds ─────────────────────────────────────── */
  --gt-bg-section:     #f5f5f5;
  --gt-bg-section-alt: #f1efed;

  /* ── Z-index scale ──────────────────────────────────────────────────── */
  --z-base:       0;
  --z-dropdown:   1250;
  --z-sticky:     1100;
  --z-drawer:     1200;
  --z-modal-mask: 1300;
  --z-modal:      1300;
  --z-popover:    1400;
  --z-tooltip:    1500;
  --z-toast:      1600;
  --z-dialog-mask: 1700;
  --z-dialog:      1710;

  /* ── Nexus interactive states ───────────────────────────────────────── */
  --nx-state-hover:      rgba(0, 0, 0, 0.04);
  --nx-state-pressed:    rgba(0, 0, 0, 0.08);
  --nx-state-selected:   rgba(0, 178, 227, 0.08);
  --nx-disabled-bg:      #f5f5f5;
  --nx-disabled-text:    #b1b1b1;
  --nx-disabled-border:  #d9d8d6;
  --nx-disabled-opacity: 0.65;

  /* ── Focus indicators ───────────────────────────────────────────────── */
  --nx-focus-ring-color:  rgba(255, 158, 24, 0.25);
  --nx-focus-ring-width:  3px;
  --nx-focus-ring-offset: 2px;
  --nx-focus-ring:        0 0 0 3px rgba(255, 158, 24, 0.25);
  --nx-focus-ring-error:  0 0 0 3px rgba(179, 38, 30, 0.25);

  /* ── Surface tokens ─────────────────────────────────────────────────── */
  --nx-surface-ground:  var(--gt-bg-section);
  --nx-surface-default: var(--oj-core-bg-color);
  --nx-surface-raised:  var(--oj-core-bg-color);
  --nx-surface-overlay: var(--oj-core-bg-color);
  --nx-surface-sunken:  #fafafa;
  --nx-overlay-bg:      rgba(0, 0, 0, 0.45);
  --nx-overlay-light:   rgba(0, 0, 0, 0.06);

  /* ── Input / form control alias tokens ──────────────────────────────── */
  --nx-input-bg:        var(--oj-core-bg-color);
  --nx-input-border:    var(--oj-core-border-color);
  --nx-input-radius:    var(--radius-md);
  --nx-input-height:    32px;
  --nx-input-height-sm: 24px;
  --nx-input-height-lg: 40px;

  /* ── Modal alias tokens ─────────────────────────────────────────────── */
  --nx-modal-radius:   var(--radius-xl);
  --nx-modal-shadow:   var(--shadow-lg);
  --nx-modal-padding:  var(--space-6);
  --nx-modal-width-sm: 416px;
  --nx-modal-width-md: 520px;
  --nx-modal-width-lg: 800px;
  --nx-modal-mask:     var(--nx-overlay-bg);

  /* ── Tooltip alias tokens ───────────────────────────────────────────── */
  --nx-tooltip-bg:        rgba(0, 0, 0, 0.85);
  --nx-tooltip-text:      #ffffff;
  --nx-tooltip-radius:    var(--radius-md);
  --nx-tooltip-max-width: 250px;
  --nx-tooltip-padding:   var(--space-1) var(--space-2);
  --nx-tooltip-font-size: var(--text-xs);

  /* ── Toast alias tokens ─────────────────────────────────────────────── */
  --nx-toast-width:      384px;
  --nx-toast-offset-top: 24px;
  --nx-toast-radius:     var(--radius-lg);
  --nx-toast-shadow:     var(--shadow-lg);
  --nx-toast-padding:    var(--space-3) var(--space-4);

  /* ── Tag / chip alias tokens ────────────────────────────────────────── */
  --nx-tag-height:    22px;
  --nx-tag-radius:    var(--radius-md);
  --nx-tag-font-size: var(--text-xs);
  --nx-tag-padding:   0 var(--space-2);

  /* ── Skeleton loading ───────────────────────────────────────────────── */
  --nx-skeleton-bg:      #f5f5f5;
  --nx-skeleton-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);

  /* ── Motion: durations ──────────────────────────────────────────────── */
  --motion-duration-fast: 100ms;
  --motion-duration-mid:  200ms;
  --motion-duration-slow: 300ms;

  /* ── Motion: easing curves ──────────────────────────────────────────── */
  --motion-ease-standard:   cubic-bezier(0.645, 0.045, 0.355, 1);
  --motion-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --motion-ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --motion-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Transition shorthands (never use `transition: all`) ────────────── */
  --transition-fast: color var(--motion-duration-fast) var(--motion-ease-standard),
                     background-color var(--motion-duration-fast) var(--motion-ease-standard),
                     border-color var(--motion-duration-fast) var(--motion-ease-standard);
  --transition-mid:  color var(--motion-duration-mid) var(--motion-ease-standard),
                     background-color var(--motion-duration-mid) var(--motion-ease-standard),
                     border-color var(--motion-duration-mid) var(--motion-ease-standard);
  --transition-slow: color var(--motion-duration-slow) var(--motion-ease-standard),
                     background-color var(--motion-duration-slow) var(--motion-ease-standard),
                     border-color var(--motion-duration-slow) var(--motion-ease-standard);
}

/* ── Reduced motion accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}