/*  ============================================================
    OECTA-HW Design Tokens  |  @home@oectahw
    ============================================================
    Canonical source of truth for colors, typography, spacing,
    shadows, and glass effects shared across all OECTA portals.

    Both admin.oectahw.com and members.oectahw.com import this
    file. Keep copies in each portal directory in sync.
    ============================================================ */

:root {

  /* ── Brand Colors ─────────────────────────────────────────── */
  --oecta-primary:                #022b4d;          /* Deep navy — gradients, heroes    */
  --oecta-primary-container:      #204164;          /* OECTA Navy — buttons, headers    */
  --oecta-primary-hover:          #162e4a;          /* Navy hover state                 */
  --oecta-primary-dark:           #1a365d;          /* Deepest interactive navy          */
  --oecta-accent:                 #f39c12;          /* Amber — CTAs, highlights         */
  --oecta-accent-container:       #fea520;          /* Amber variant — badges, emphasis */
  --oecta-accent-hover:           #d68910;          /* Amber hover                      */

  /* ── Surfaces ─────────────────────────────────────────────── */
  --oecta-surface:                #faf9fc;          /* App background                   */
  --oecta-surface-low:            #f4f3f6;          /* Subtle containers                */
  --oecta-surface-container:      #eeedf1;          /* Recessed areas                   */
  --oecta-surface-lowest:         #ffffff;          /* Cards, panels (highest elevation) */
  --oecta-surface-high:           #e8e8eb;          /* Input backgrounds, dividers      */
  --oecta-bg-app:                 #f8fafc;          /* Legacy: admin app background      */
  --oecta-bg-subtle:              #f1f5f9;          /* Hover/zebra rows                 */

  /* ── Text ─────────────────────────────────────────────────── */
  --oecta-on-surface:             #1a1c1e;          /* Primary text                     */
  --oecta-on-surface-variant:     #43474e;          /* Secondary text                   */
  --oecta-text-main:              #2d3748;          /* Legacy: admin body text           */
  --oecta-text-muted:             #64748b;          /* Helper text, captions            */
  --oecta-text-subtle:            #94a3b8;          /* Placeholder, disabled            */

  /* ── Borders & Outlines ───────────────────────────────────── */
  --oecta-outline:                #73777f;          /* Prominent borders                */
  --oecta-outline-variant:        #c3c6cf;          /* Ghost borders                    */
  --oecta-border:                 #e2e8f0;          /* Default border (legacy compat)   */
  --oecta-border-subtle:          #cbd5e0;          /* Softer dividers                  */

  /* ── Status ───────────────────────────────────────────────── */
  --oecta-success:                #16a34a;          /* Confirmed, active                */
  --oecta-success-soft:           #dcfce7;          /* Success background               */
  --oecta-error:                  #ba1a1a;          /* Errors, destructive              */
  --oecta-error-soft:             #fee2e2;          /* Error background                 */
  --oecta-warning:                #dd6b20;          /* Caution, pending                 */
  --oecta-warning-soft:           #fef3c7;          /* Warning background               */
  --oecta-info:                   #3b82f6;          /* Informational                    */
  --oecta-info-soft:              #dbeafe;          /* Info background                  */

  /* ── Typography ───────────────────────────────────────────── */
  --oecta-font-display:           'Manrope', 'Segoe UI', sans-serif;
  --oecta-font-body:              'Inter', 'Segoe UI', sans-serif;
  --oecta-font-mono:              'Roboto Mono', 'Courier New', monospace;

  --oecta-text-xs:                0.75rem;          /* 12px  */
  --oecta-text-sm:                0.8125rem;        /* 13px  */
  --oecta-text-base:              0.875rem;         /* 14px  */
  --oecta-text-md:                0.9375rem;        /* 15px  */
  --oecta-text-lg:                1.125rem;         /* 18px  */
  --oecta-text-xl:                1.5rem;           /* 24px  */
  --oecta-text-2xl:               2rem;             /* 32px  */
  --oecta-text-3xl:               2.5rem;           /* 40px  */

  --oecta-weight-regular:         400;
  --oecta-weight-medium:          500;
  --oecta-weight-semibold:        600;
  --oecta-weight-bold:            700;
  --oecta-weight-extrabold:       800;

  /* ── Spacing ──────────────────────────────────────────────── */
  --oecta-space-xs:               4px;
  --oecta-space-sm:               8px;
  --oecta-space-md:               12px;
  --oecta-space-lg:               16px;
  --oecta-space-xl:               24px;
  --oecta-space-2xl:              32px;
  --oecta-space-3xl:              48px;

  /* ── Border Radius ────────────────────────────────────────── */
  --oecta-radius-xs:              4px;
  --oecta-radius-sm:              6px;
  --oecta-radius-md:              8px;
  --oecta-radius-lg:              12px;
  --oecta-radius-xl:              16px;
  --oecta-radius-2xl:             20px;
  --oecta-radius-pill:            99px;
  --oecta-radius-round:           50%;

  /* ── Shadows (navy-tinted, never pure black) ──────────────── */
  --oecta-shadow-xs:              0 1px 2px rgba(32,65,100,0.03);
  --oecta-shadow-sm:              0 2px 8px rgba(32,65,100,0.04);
  --oecta-shadow-md:              0 4px 16px rgba(32,65,100,0.06);
  --oecta-shadow-lg:              0 10px 30px rgba(32,65,100,0.08);
  --oecta-shadow-xl:              0 16px 48px rgba(32,65,100,0.12);
  --oecta-shadow-accent:          0 4px 12px rgba(243,156,18,0.35);
  --oecta-shadow-accent-hover:    0 6px 18px rgba(243,156,18,0.5);
  --oecta-focus-ring:             0 0 0 3px rgba(32,65,100,0.12);
  --oecta-focus-ring-accent:      0 0 0 3px rgba(243,156,18,0.25);

  /* ── Glass / Frosted Effects ──────────────────────────────── */
  --oecta-glass-bg:               rgba(250,249,252,0.80);
  --oecta-glass-bg-dark:          rgba(15,20,25,0.85);
  --oecta-glass-blur:             20px;
  --oecta-glass-border:           rgba(255,255,255,0.15);

  /* ── Transitions ──────────────────────────────────────────── */
  --oecta-duration-fast:          120ms;
  --oecta-duration-base:          200ms;
  --oecta-duration-slow:          350ms;
  --oecta-ease:                   cubic-bezier(0.4, 0, 0.2, 1);
  --oecta-ease-spring:            cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ───────────────────────────────────────────────── */
  --oecta-sidebar-width:          240px;
  --oecta-sidebar-collapsed:      64px;
  --oecta-header-height:          56px;
  --oecta-bottom-nav-height:      60px;
  --oecta-content-max:            1200px;

  /* ── Z-Index Scale ────────────────────────────────────────── */
  --oecta-z-base:                 1;
  --oecta-z-dropdown:             100;
  --oecta-z-sticky:               200;
  --oecta-z-nav:                  500;
  --oecta-z-sidebar:              600;
  --oecta-z-drawer:               700;
  --oecta-z-bottom-nav:           900;
  --oecta-z-modal-backdrop:       4000;
  --oecta-z-modal:                4500;
  --oecta-z-toast:                5000;
  --oecta-z-tooltip:              5500;
  --oecta-z-overlay:              9000;

  /* ── Gradients ────────────────────────────────────────────── */
  --oecta-gradient-navy:          linear-gradient(135deg, #022b4d 0%, #204164 100%);
  --oecta-gradient-navy-deep:     linear-gradient(135deg, #011627 0%, #022b4d 50%, #204164 100%);
  --oecta-gradient-accent:        linear-gradient(135deg, #f39c12 0%, #fea520 100%);
  --oecta-gradient-surface:       linear-gradient(180deg, #faf9fc 0%, #eeedf1 100%);
}


/* ── Dark Mode Overrides ──────────────────────────────────── */

body.dark-mode {
  --oecta-primary-container:      #4a90d9;
  --oecta-primary-hover:          #3a7bc8;

  --oecta-surface:                #0f1419;
  --oecta-surface-low:            #1a2332;
  --oecta-surface-container:      #243044;
  --oecta-surface-lowest:         #1e293b;
  --oecta-surface-high:           #2d3a4a;
  --oecta-bg-app:                 #0f1419;
  --oecta-bg-subtle:              #1e293b;

  --oecta-on-surface:             #e2e8f0;
  --oecta-on-surface-variant:     #94a3b8;
  --oecta-text-main:              #e2e8f0;
  --oecta-text-muted:             #94a3b8;
  --oecta-text-subtle:            #64748b;

  --oecta-outline-variant:        #2d3a4a;
  --oecta-border:                 #2d3a4a;
  --oecta-border-subtle:          #1e293b;

  --oecta-glass-bg:               rgba(15,20,25,0.85);
  --oecta-glass-border:           rgba(255,255,255,0.08);

  --oecta-shadow-sm:              0 2px 8px rgba(0,0,0,0.2);
  --oecta-shadow-md:              0 4px 16px rgba(0,0,0,0.25);
  --oecta-shadow-lg:              0 10px 30px rgba(0,0,0,0.3);

  --oecta-gradient-navy:          linear-gradient(135deg, #0f1419 0%, #1a2332 100%);
  --oecta-gradient-surface:       linear-gradient(180deg, #0f1419 0%, #1a2332 100%);
}