/**
 * @file
 * Color tokens for SSE Theme - Light & Dark mode support
 *
 * Pattern: Raw palette → Semantic tokens → Theme-aware swapping
 */


/*
 * @file
 * Color tokens for SSE Theme - Light & Dark mode support
 *
 * Pattern: Raw palette → Semantic tokens → Theme-aware swapping
 */

@layer tokens {
  /* ========================================
     Raw Palette (stable, brand colors)
     ======================================== */
  :root {
    /* Brand colors - SSE Identity */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;

    /* Neutrals - Grayscale */
    --neutral-0:   #ffffff;
    --neutral-50:  #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #0b0f14;

    /* Success/Info/Warning/Danger */
    --emerald-50:  #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-900: #065f46;
    --blue-50:     #eff6ff;
    --blue-100:    #dbeafe;
    --blue-900:    #1e3a8a;
    --amber-50:    #fffbeb;
    --amber-100:   #fef3c7;
    --amber-900:   #78350f;
    --red-50:      #fef2f2;
    --red-100:     #fee2e2;
    --red-900:     #7f1d1d;

    /* Responsive Breakpoints */
    --breakpoint-tablet: 900px;   /* Grid: 3→2 cols, Calendar: month→list, BEF: checkboxes→select */
    --breakpoint-mobile: 600px;   /* Grid: 2→1 cols */
    --breakpoint-small:  480px;   /* Minimal spacing adjustments */
  }
}

/* ========================================
   Front canvas scoping to prevent admin UI interference
   These overrides ensure semantic tokens only apply within
   the main site canvas rendered by the front theme, leaving
   the Drupal admin toolbar/theme unaffected.
   ======================================== */
@layer tokens {
  /* Light (default) within main canvas and header elements */
  .dialog-off-canvas-main-canvas,
  body,
  .site-header,
  .header-nav {
    --color-bg:        var(--neutral-0);
    --color-surface:   var(--neutral-50);
    --color-elevated:  var(--neutral-100);

    /* Card body fill: a clearly visible grey in light mode (surface ≈ white). */
    --sse-card-body:   var(--neutral-200);

    --color-fg:        var(--neutral-900);
    --color-fg-muted:  var(--neutral-600);
    --color-fg-subtle: var(--neutral-500);

    --color-border:      var(--neutral-200);
    --color-border-dark: var(--neutral-300);

    --color-link:         var(--brand-600);
    --color-link-hover:   var(--brand-700);
    --color-link-visited: var(--brand-800);
    --color-focus:        var(--brand-600);

    --color-success-bg: var(--emerald-100);
    --color-success-fg: var(--emerald-900);
    --color-info-bg:    var(--blue-100);
    --color-info-fg:    var(--blue-900);
    --color-warning-bg: var(--amber-100);
    --color-warning-fg: var(--amber-900);
    --color-danger-bg:  var(--red-100);
    --color-danger-fg:  var(--red-900);
  }

  /* Explicit dark within main canvas and header elements */
  html[data-theme="dark"] .dialog-off-canvas-main-canvas,
  html[data-theme="dark"] body,
  html[data-theme="dark"] .site-header,
  html[data-theme="dark"] .header-nav {
    --color-bg:        var(--neutral-950);
    --color-surface:   color-mix(in oklab, var(--neutral-950) 85%, white 15%);
    --color-elevated:  color-mix(in oklab, var(--neutral-950) 75%, white 25%);

    /* Card body fill: the elevated panel in dark mode. */
    --sse-card-body:   color-mix(in oklab, var(--neutral-950) 75%, white 25%);

    --color-fg:        var(--neutral-100);
    --color-fg-muted:  var(--neutral-400);
    --color-fg-subtle: var(--neutral-500);

    --color-border:      color-mix(in oklab, var(--neutral-950) 70%, white 30%);
    --color-border-dark: color-mix(in oklab, var(--neutral-950) 60%, white 40%);

    --color-link:         color-mix(in oklab, var(--brand-500) 80%, white 20%);
    --color-link-hover:   color-mix(in oklab, var(--brand-400) 85%, white 15%);
    --color-link-visited: color-mix(in oklab, var(--brand-600) 75%, white 25%);
    --color-focus:        var(--brand-500);

    --color-success-bg: color-mix(in oklab, var(--emerald-900) 30%, var(--emerald-100) 70%);
    --color-success-fg: var(--emerald-100);
    --color-info-bg:    color-mix(in oklab, var(--blue-900) 30%, var(--blue-100) 70%);
    --color-info-fg:    var(--blue-100);
    --color-warning-bg: color-mix(in oklab, var(--amber-900) 30%, var(--amber-100) 70%);
    --color-warning-fg: var(--amber-100);
    --color-danger-bg:  color-mix(in oklab, var(--red-900) 30%, var(--red-100) 70%);
    --color-danger-fg:  var(--red-100);
    --color-text-neutral-soft: var(--color--gray-45);
    --color-text-neutral-medium: var(--color--gray-60);
    --color-text-neutral-loud: var(--color--gray-70);
    --color-text-primary-medium: var(--color--gray-90);
    --color-text-primary-loud: var(--color--white);
  }

  /* System preference dark within main canvas and header elements */
  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .dialog-off-canvas-main-canvas,
    html:not([data-theme]) body,
    html:not([data-theme]) .site-header,
    html:not([data-theme]) .header-nav {
      --color-bg:        var(--neutral-950);
      --color-surface:   color-mix(in oklab, var(--neutral-950) 85%, white 15%);
      --color-elevated:  color-mix(in oklab, var(--neutral-950) 75%, white 25%);

    /* Card body fill: the elevated panel in dark mode. */
    --sse-card-body:   color-mix(in oklab, var(--neutral-950) 75%, white 25%);

      --color-fg:        var(--neutral-100);
      --color-fg-muted:  var(--neutral-400);
      --color-fg-subtle: var(--neutral-500);

      --color-border:      color-mix(in oklab, var(--neutral-950) 70%, white 30%);
      --color-border-dark: color-mix(in oklab, var(--neutral-950) 60%, white 40%);

      --color-link:         color-mix(in oklab, var(--brand-500) 80%, white 20%);
      --color-link-hover:   color-mix(in oklab, var(--brand-400) 85%, white 15%);
      --color-link-visited: color-mix(in oklab, var(--brand-600) 75%, white 25%);
      --color-focus:        var(--brand-500);

      --color-success-bg: color-mix(in oklab, var(--emerald-900) 30%, var(--emerald-100) 70%);
      --color-success-fg: var(--emerald-100);
      --color-info-bg:    color-mix(in oklab, var(--blue-900) 30%, var(--blue-100) 70%);
      --color-info-fg:    var(--blue-100);
      --color-warning-bg: color-mix(in oklab, var(--amber-900) 30%, var(--amber-100) 70%);
      --color-warning-fg: var(--amber-100);
      --color-danger-bg:  color-mix(in oklab, var(--red-900) 30%, var(--red-100) 70%);
      --color-danger-fg:  var(--red-100);
    }
  }
}