/* ══════════════════════════════════════════════════════════════
   Bokitta Portal — Design Tokens
   ══════════════════════════════════════════════════════════════
   SECTION 1: Canonical tokens (--color-* namespace)
              Single source of truth for all colors, spacing, etc.
              To change the brand palette, edit ONLY this section.

   SECTION 2: Alias layer (--bk-* namespace)
              Consumed by portal CSS, kanban, PSC, board_list, etc.
              Maps through --color-* so everything stays in sync.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   SECTION 1 — Canonical Tokens (--color-*)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Brand Palette ── */
  --color-brand-primary:       #1a1a2e;
  --color-brand-primary-hover: #15151f;
  --color-brand-gold:          #c29954;
  --color-brand-gold-light:    #f5eedd;
  --color-brand-gold-dark:     #a07d3f;
  --color-brand-rose:          #8B4A5E;
  --color-brand-teal:          #2D7D7B;

  /* ── Cinematic Surfaces ── */
  --color-surface-hero:        #1a1a2e;
  --color-surface-hero-glass:  rgba(255,255,255,0.08);

  /* ── Typography Families ── */
  --color-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --color-font-body:  'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── Admin Accent (Django admin context only) ── */
  --color-admin-primary:       #417690;
  --color-admin-primary-hover: #205067;

  /* ── Semantic Status ── */
  --color-success:     #10B981;
  --color-warning:     #F59E0B;
  --color-caution:     #F97316;
  --color-error:       #DC2626;
  --color-info:        #3B82F6;

  /* ── Text ── */
  --color-text:        #2d2d3a;
  --color-text-muted:  #6c757d;
  --color-charcoal:    #1F2937;

  /* ── Surfaces ── */
  --color-surface-page:  #FAF9F6;
  --color-surface-card:  #ffffff;
  --color-surface-inset: #f0f2f5;
  --color-surface-stripe: #f8f9fb;

  /* ── Borders ── */
  --color-border:       #e9ecef;
  --color-border-warm:  #E5E0DA;
  --color-border-soft:  #E8E2D9;

  /* ── Grey Scale ── */
  --color-grey-100: #f8f8f8;
  --color-grey-200: #f0f0f0;
  --color-grey-300: #e0e0e0;
  --color-grey-400: #ccc;
  --color-grey-500: #999;
  --color-grey-600: #888;
  --color-grey-700: #666;
  --color-grey-800: #555;
  --color-grey-900: #333;

  /* ── Status Badge Pairs (bg + fg) ── */
  --color-status-completed-bg:    #d1fae5;
  --color-status-completed-fg:    #065f46;
  --color-status-in-progress-bg:  #dbeafe;
  --color-status-in-progress-fg:  #1e40af;
  --color-status-awaiting-bg:     #fef3c7;
  --color-status-awaiting-fg:     #92400e;
  --color-status-pending-bg:      #f3f4f6;
  --color-status-pending-fg:      #6b7280;
  --color-status-rejected-bg:     #fee2e2;
  --color-status-rejected-fg:     #991b1b;
  --color-status-overdue-bg:      #fecaca;
  --color-status-overdue-fg:      #7f1d1d;

  /* ── Shadows (3 elevations) ── */
  --color-shadow-sm:    0 1px 3px rgba(0,0,0,0.06);
  --color-shadow-md:    0 2px 8px rgba(0,0,0,0.08);
  --color-shadow-lg:    0 4px 16px rgba(0,0,0,0.12);
  --color-shadow-hover: 0 4px 12px rgba(0,0,0,0.10);

  /* ── Border Radius ── */
  --color-radius-sm:   6px;
  --color-radius-md:   10px;
  --color-radius-lg:   14px;
  --color-radius-xl:   20px;
  --color-radius-pill: 9999px;

  /* ── Spacing Scale (4px base) ── */
  --color-space-1:  4px;
  --color-space-2:  8px;
  --color-space-3:  12px;
  --color-space-4:  16px;
  --color-space-5:  20px;
  --color-space-6:  24px;
  --color-space-8:  32px;
  --color-space-10: 40px;
  --color-space-12: 48px;

  /* ── Typography ── */
  --color-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --color-font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;

  /* ── Motion ── */
  --color-ease-snappy:     150ms ease-out;
  --color-ease-deliberate: 300ms ease-in-out;
  --color-ease-spring:     500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Focus ── */
  --color-focus-ring: 0 0 0 2px var(--color-brand-teal);

  /* ── Z-index Scale ── */
  --color-z-dropdown: 100;
  --color-z-sticky:   200;
  --color-z-overlay:  500;
  --color-z-modal:    600;
  --color-z-toast:    700;
  --color-z-tour:     800;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 2 — Alias Layer (--bk-* → --color-*)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Brand Colors ── */
  --bk-navy:       var(--color-brand-primary);
  --bk-rose:       var(--color-brand-rose);
  --bk-teal:       var(--color-brand-teal);
  --bk-gold:       var(--color-brand-gold);
  --bk-gold-light: var(--color-brand-gold-light);
  --bk-gold-dark:  var(--color-brand-gold-dark);

  /* ── Cinematic Surfaces ── */
  --bk-surface-hero:       var(--color-surface-hero);
  --bk-surface-hero-glass: var(--color-surface-hero-glass);

  /* ── Cinematic Typography ── */
  --bk-font-serif: var(--color-font-serif);
  --bk-font-body:  var(--color-font-body);

  /* ── Semantic Colors ── */
  --bk-emerald:    var(--color-success);
  --bk-amber:      var(--color-warning);
  --bk-orange:     var(--color-caution);
  --bk-red:        var(--color-error);

  /* ── Neutrals ── */
  --bk-charcoal:   var(--color-charcoal);
  --bk-text:       var(--color-text);
  --bk-text-muted: var(--color-text-muted);
  --bk-warm-grey:  var(--color-border-warm);
  --bk-border:     var(--color-border);
  --bk-parchment:  var(--color-surface-page);
  --bk-card:       var(--color-surface-card);
  --bk-stripe:     var(--color-surface-stripe);

  /* ── Surfaces (3 elevation levels) ── */
  --bk-surface-0:  var(--color-surface-page);
  --bk-surface-1:  var(--color-surface-card);
  --bk-surface-2:  var(--color-surface-inset);

  /* ── Shadows (3 elevations) ── */
  --bk-shadow-sm:    var(--color-shadow-sm);
  --bk-shadow-md:    var(--color-shadow-md);
  --bk-shadow-lg:    var(--color-shadow-lg);
  --bk-shadow-hover: var(--color-shadow-hover);

  /* ── Border Radius ── */
  --bk-radius-sm:   var(--color-radius-sm);
  --bk-radius-md:   var(--color-radius-md);
  --bk-radius-lg:   var(--color-radius-lg);
  --bk-radius-xl:   var(--color-radius-xl);
  --bk-radius-pill: var(--color-radius-pill);

  /* ── Spacing Scale (4px base) ── */
  --bk-space-1:  var(--color-space-1);
  --bk-space-2:  var(--color-space-2);
  --bk-space-3:  var(--color-space-3);
  --bk-space-4:  var(--color-space-4);
  --bk-space-5:  var(--color-space-5);
  --bk-space-6:  var(--color-space-6);
  --bk-space-8:  var(--color-space-8);
  --bk-space-10: var(--color-space-10);
  --bk-space-12: var(--color-space-12);

  /* ── Typography Scale ── */
  --bk-font:       var(--color-font);
  --bk-font-mono:  var(--color-font-mono);
  --bk-text-xs:    0.7rem;
  --bk-text-sm:    0.8rem;
  --bk-text-base:  0.9rem;
  --bk-text-md:    1rem;
  --bk-text-lg:    1.15rem;
  --bk-text-xl:    1.35rem;
  --bk-text-2xl:   1.6rem;
  --bk-text-3xl:   2rem;

  /* ── Motion ── */
  --bk-ease-snappy:     var(--color-ease-snappy);
  --bk-ease-deliberate: var(--color-ease-deliberate);
  --bk-ease-spring:     var(--color-ease-spring);

  /* ── Focus Ring ── */
  --bk-focus-ring: var(--color-focus-ring);

  /* ── Z-index Scale ── */
  --bk-z-dropdown:  var(--color-z-dropdown);
  --bk-z-sticky:    var(--color-z-sticky);
  --bk-z-overlay:   var(--color-z-overlay);
  --bk-z-modal:     var(--color-z-modal);
  --bk-z-toast:     var(--color-z-toast);
  --bk-z-tour:      var(--color-z-tour);

  /* ── Admin Accent (Django admin primary — admin-only pages) ── */
  --bk-admin:       var(--color-admin-primary);
  --bk-admin-hover: var(--color-admin-primary-hover);

  /* ── Extended Greys ── */
  --bk-grey-100: var(--color-grey-100);
  --bk-grey-200: var(--color-grey-200);
  --bk-grey-300: var(--color-grey-300);
  --bk-grey-400: var(--color-grey-400);
  --bk-grey-500: var(--color-grey-500);
  --bk-grey-600: var(--color-grey-600);
  --bk-grey-700: var(--color-grey-700);
  --bk-grey-800: var(--color-grey-800);
  --bk-grey-900: var(--color-grey-900);

  /* ── Status Badge Colors ── */
  --bk-status-completed-bg:    var(--color-status-completed-bg);
  --bk-status-completed-fg:    var(--color-status-completed-fg);
  --bk-status-in_progress-bg:  var(--color-status-in-progress-bg);
  --bk-status-in_progress-fg:  var(--color-status-in-progress-fg);
  --bk-status-awaiting-bg:     var(--color-status-awaiting-bg);
  --bk-status-awaiting-fg:     var(--color-status-awaiting-fg);
  --bk-status-pending-bg:      var(--color-status-pending-bg);
  --bk-status-pending-fg:      var(--color-status-pending-fg);
  --bk-status-rejected-bg:     var(--color-status-rejected-bg);
  --bk-status-rejected-fg:     var(--color-status-rejected-fg);
  --bk-status-overdue-bg:      var(--color-status-overdue-bg);
  --bk-status-overdue-fg:      var(--color-status-overdue-fg);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --color-ease-snappy:     0ms;
    --color-ease-deliberate: 0ms;
    --color-ease-spring:     0ms;
    --bk-ease-snappy:     0ms;
    --bk-ease-deliberate: 0ms;
    --bk-ease-spring:     0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Global Resets (portal pages only) ── */
body.portal-page {
  font-family: var(--bk-font);
  background: var(--bk-parchment);
  color: var(--bk-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Focus Visible ── */
:focus-visible {
  outline: none;
  box-shadow: var(--bk-focus-ring);
}

/* ── RTL Support ── */
[dir="rtl"] .bk-icon-end { transform: scaleX(-1); }

/* Flip directional borders (accent left → right) */
[dir="rtl"] .bk-stat { border-left: none; border-right: 4px solid var(--bk-border); }
[dir="rtl"] .bk-stat--navy    { border-right-color: var(--bk-navy); }
[dir="rtl"] .bk-stat--rose    { border-right-color: var(--bk-rose); }
[dir="rtl"] .bk-stat--teal    { border-right-color: var(--bk-teal); }
[dir="rtl"] .bk-stat--emerald { border-right-color: var(--bk-emerald); }
[dir="rtl"] .bk-stat--amber   { border-right-color: var(--bk-amber); }
[dir="rtl"] .bk-stat--orange  { border-right-color: var(--bk-orange); }
[dir="rtl"] .bk-stat--red     { border-right-color: var(--bk-red); }

/* Nav & layout direction */
[dir="rtl"] .pn .brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .pn .nav-right { margin-left: 0; margin-right: auto; }

/* Notification bell badge */
[dir="rtl"] #notif-count { right: auto; left: 4px; }
[dir="rtl"] #notif-dropdown { right: auto; left: 0; }

/* Dashboard action cards */
[dir="rtl"] .card[style*="border-left"] { border-left: none !important; }
[dir="rtl"] .card { border-right: 4px solid var(--bk-border); }

/* Text alignment */
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .text-left { text-align: right; }

/* Timeline connector line */
[dir="rtl"] .wf-timeline__step:not(:first-child)::before {
  right: auto; left: 50%;
}

/* Camera FAB */
[dir="rtl"] .camera-fab { right: auto; left: 24px; }

/* Back arrows flip */
[dir="rtl"] a[href*="Back"] { direction: rtl; unicode-bidi: bidi-override; }