/* ==========================================================================
   PayVoice Design Tokens & Adaptive Light/Dark Theme System
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Progressive color-space interpolation hooks */
    --in-oklab: ;
    --in-oklch: ;

    /* Brand & Institutional Fintech Accent Tokens */
    --color-brand-primary: #0a54e6;
    --color-brand-secondary: var(--color-brand-accent);
    --color-brand-hover: #0741b8;
    --color-brand-btn-bg: #0a54e6;
    --color-brand-btn-hover: #0741b8;
    --color-brand-accent: #0284c7;
    --color-brand-navy: #070d19;
    --color-brand-soft: color-mix(var(--in-oklab) var(--color-brand-primary) 10%, transparent);
    --color-brand-ring: color-mix(var(--in-oklab) var(--color-brand-primary) 26%, transparent);

    /* Surface & Canvas Hierarchy (Light) */
    --color-bg-canvas: #f4f6fa;
    --color-bg-surface: #ffffff;
    --color-surface: var(--color-bg-surface);
    --color-bg-surface-hover: #f8fafd;
    --color-bg-subtle: #edf1f7;
    --color-bg-elevated: #ffffff;
    --color-bg-topbar: rgba(255, 255, 255, 0.82);

    /* Sidebar Obsidian Palette */
    --color-sidebar-bg: #070d19;
    --color-sidebar-surface: #0d1628;
    --color-sidebar-text: #94a3b8;
    --color-sidebar-text-hover: #f1f5f9;
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-hover-bg: rgba(148, 163, 184, 0.1);
    --color-sidebar-active-bg: rgba(59, 130, 246, 0.16);
    --color-sidebar-border: rgba(148, 163, 184, 0.14);

    /* Typography Colors (WCAG AA >= 4.5:1 on surface/canvas) */
    --color-text-primary: #0b1324;
    --color-text-secondary: #435066;
    --color-text-muted: #5d6b82;
    --color-text-tertiary: #64748b;
    --color-text-inverse: #ffffff;

    /* Chart Palette */
    --color-chart-1: #0a54e6;
    --color-chart-2: #0284c7;
    --color-chart-3: #059669;
    --color-chart-4: #d97706;
    --color-chart-5: #6366f1;
    --color-chart-grid: rgba(100, 116, 139, 0.16);

    /* Borders & Hairlines */
    --color-border: #dfe5ef;
    --color-border-strong: #c6d0e0;
    --color-border-subtle: #ecf0f6;

    /* Semantic Status Colors */
    --color-success: #047857;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-warning: #a16207;
    --color-warning-bg: #fefce8;
    --color-warning-border: #fde047;
    --color-danger: #b91c1c;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;
    --color-info: #0369a1;
    --color-info-bg: #f0f9ff;
    --color-info-border: #bae6fd;

    /* Multi-layered Realistic Depth Shadows */
    --shadow-xs: 0 1px 2px rgba(9, 16, 33, 0.04);
    --shadow-sm:
      0 1px 2px rgba(9, 16, 33, 0.04),
      0 2px 6px rgba(9, 16, 33, 0.04);
    --shadow-md:
      0 1px 2px rgba(9, 16, 33, 0.04),
      0 6px 16px -4px rgba(9, 16, 33, 0.08),
      0 2px 4px rgba(9, 16, 33, 0.03);
    --shadow-lg:
      0 2px 6px rgba(9, 16, 33, 0.04),
      0 16px 36px -8px rgba(9, 16, 33, 0.14),
      0 4px 12px rgba(9, 16, 33, 0.06);
    --shadow-card-hover:
      0 1px 3px rgba(9, 16, 33, 0.05),
      0 12px 24px -6px rgba(10, 84, 230, 0.1);
    --shadow-glow-brand: 0 0 0 3px var(--color-brand-ring);

    /* Typography Scale (rem & clamp for accessibility) */
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --text-2xs: 0.6875rem; /* 11px */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 0.9375rem;/* 15px */
    --text-md: 1rem;       /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
    --text-3xl: clamp(1.625rem, 1.35rem + 1vw, 2.0625rem);

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Border Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.125rem;
    --radius-full: 9999px;

    /* Motion */
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 150ms var(--ease-standard);
    --transition-base: 220ms var(--ease-standard);
    --transition-slow: 320ms var(--ease-standard);

    /* Layout Constants */
    --sidebar-width: 16.25rem;
    --header-height: 4rem;
    --content-max-width: 90rem;

    /* Layer Stack */
    --z-topbar: 20;
    --z-sidebar: 30;
    --z-popover: 40;
    --z-toast: 60;
  }

  @supports (color: oklch(from red l c h)) {
    :root {
      --in-oklab: in oklab;
      --in-oklch: in oklch;
    }
  }

  /* Automatic OS Dark Mode */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not(:has(> head > meta[name="color-scheme"][content="light"])) {
      --color-brand-primary: #60a5fa;
      --color-brand-hover: #93c5fd;
      --color-brand-btn-bg: #2563eb;
      --color-brand-btn-hover: #1d4ed8;
      --color-brand-accent: #38bdf8;
      --color-brand-soft: rgba(96, 165, 250, 0.14);
      --color-brand-ring: rgba(96, 165, 250, 0.32);

      --color-bg-canvas: #070c17;
      --color-bg-surface: #0d1424;
      --color-bg-surface-hover: #131c31;
      --color-bg-subtle: #111a2e;
      --color-bg-elevated: #141f36;
      --color-bg-topbar: rgba(13, 20, 36, 0.84);

      --color-sidebar-bg: #050912;
      --color-sidebar-surface: #0a1120;
      --color-sidebar-border: rgba(148, 163, 184, 0.12);

      --color-text-primary: #f1f5f9;
      --color-text-secondary: #b6c2d4;
      --color-text-muted: #8b9ab2;
      --color-text-tertiary: #94a3b8;

      --color-chart-1: #3b82f6;
      --color-chart-2: #38bdf8;
      --color-chart-3: #34d399;
      --color-chart-4: #fbbf24;
      --color-chart-5: #818cf8;
      --color-chart-grid: rgba(148, 163, 184, 0.16);

      --color-border: #1e2a42;
      --color-border-strong: #2d3e5e;
      --color-border-subtle: #162035;

      --color-success: #34d399;
      --color-success-bg: rgba(16, 185, 129, 0.14);
      --color-success-border: rgba(52, 211, 153, 0.3);
      --color-warning: #fbbf24;
      --color-warning-bg: rgba(245, 158, 11, 0.14);
      --color-warning-border: rgba(251, 191, 36, 0.32);
      --color-danger: #f87171;
      --color-danger-bg: rgba(239, 68, 68, 0.14);
      --color-danger-border: rgba(248, 113, 113, 0.3);
      --color-info: #38bdf8;
      --color-info-bg: rgba(56, 189, 248, 0.14);
      --color-info-border: rgba(56, 189, 248, 0.3);

      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
      --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.48);
      --shadow-lg: 0 20px 44px -8px rgba(0, 0, 0, 0.65);
      --shadow-card-hover: 0 12px 28px -6px rgba(37, 99, 235, 0.22);
    }
  }

  /* Explicit User Dark Override (linked to <meta name="color-scheme"> + data-theme) */
  :root:has(> head > meta[name="color-scheme"][content="dark"]),
  [data-theme="dark"] {
    --color-brand-primary: #60a5fa;
    --color-brand-hover: #93c5fd;
    --color-brand-btn-bg: #2563eb;
    --color-brand-btn-hover: #1d4ed8;
    --color-brand-accent: #38bdf8;
    --color-brand-soft: rgba(96, 165, 250, 0.14);
    --color-brand-ring: rgba(96, 165, 250, 0.32);

    --color-bg-canvas: #070c17;
    --color-bg-surface: #0d1424;
    --color-bg-surface-hover: #131c31;
    --color-bg-subtle: #111a2e;
    --color-bg-elevated: #141f36;
    --color-bg-topbar: rgba(13, 20, 36, 0.84);

    --color-sidebar-bg: #050912;
    --color-sidebar-surface: #0a1120;
    --color-sidebar-border: rgba(148, 163, 184, 0.12);

    --color-text-primary: #f1f5f9;
    --color-text-secondary: #b6c2d4;
    --color-text-muted: #8b9ab2;
    --color-text-tertiary: #94a3b8;

    --color-chart-1: #3b82f6;
    --color-chart-2: #38bdf8;
    --color-chart-3: #34d399;
    --color-chart-4: #fbbf24;
    --color-chart-5: #818cf8;
    --color-chart-grid: rgba(148, 163, 184, 0.16);

    --color-border: #1e2a42;
    --color-border-strong: #2d3e5e;
    --color-border-subtle: #162035;

    --color-success: #34d399;
    --color-success-bg: rgba(16, 185, 129, 0.14);
    --color-success-border: rgba(52, 211, 153, 0.3);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(245, 158, 11, 0.14);
    --color-warning-border: rgba(251, 191, 36, 0.32);
    --color-danger: #f87171;
    --color-danger-bg: rgba(239, 68, 68, 0.14);
    --color-danger-border: rgba(248, 113, 113, 0.3);
    --color-info: #38bdf8;
    --color-info-bg: rgba(56, 189, 248, 0.14);
    --color-info-border: rgba(56, 189, 248, 0.3);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.48);
    --shadow-lg: 0 20px 44px -8px rgba(0, 0, 0, 0.65);
    --shadow-card-hover: 0 12px 28px -6px rgba(37, 99, 235, 0.22);
  }

  /* High-Contrast / Forced Colors System Token Fallbacks */
  @media (forced-colors: active) {
    :root {
      --color-bg-canvas: Canvas;
      --color-bg-surface: Canvas;
      --color-bg-elevated: Canvas;
      --color-bg-subtle: Canvas;
      --color-text-primary: CanvasText;
      --color-text-secondary: CanvasText;
      --color-text-muted: GrayText;
      --color-brand-primary: Highlight;
      --color-brand-btn-bg: Highlight;
      --color-border: ButtonBorder;
      --color-border-strong: ButtonBorder;
      --color-success: Highlight;
      --color-warning: Highlight;
      --color-danger: Highlight;
      --color-info: LinkText;
    }
  }
}