/* ============================================================
   Imforia Design Tokens  —  v1.0  (Phase 1: Design System Lock)
   DO NOT touch production pages until Phase 2.
   Source of truth for all color, spacing, type, motion, and
   surface decisions across the Imforia UI.
   ============================================================ */

:root {

  /* ── Brand Colors ──────────────────────────────────────────
     Extracted from app.min.css and landing.css.
     Primary = Orange (#ff6c2f)
     Accent  = Indigo (#4361ee)                               */
  --color-brand-primary:       #ff6c2f;
  --color-brand-primary-dark:  #e5561f;
  --color-brand-primary-light: #fff0ea;
  --color-brand-primary-rgb:   255, 108, 47;

  --color-brand-accent:        #4361ee;
  --color-brand-accent-dark:   #3a56d4;
  --color-brand-accent-light:  #eef1ff;
  --color-brand-accent-rgb:    67, 97, 238;

  /* ── Neutrals ─────────────────────────────────────────────
     Calibrated against the existing bs-light, bs-dark, and
     heading-color values found in app.min.css.               */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* ── Semantic: Success ───────────────────────────────────── */
  --color-success:       #22c55e;
  --color-success-light: #dcfce7;
  --color-success-dark:  #16a34a;
  --color-success-rgb:   34, 197, 94;

  /* ── Semantic: Warning ───────────────────────────────────── */
  --color-warning:       #f9b931;
  --color-warning-light: #fef9c3;
  --color-warning-dark:  #ca8a04;
  --color-warning-rgb:   249, 185, 49;

  /* ── Semantic: Danger ────────────────────────────────────── */
  --color-danger:       #ef5f5f;
  --color-danger-light: #fee2e2;
  --color-danger-dark:  #dc2626;
  --color-danger-rgb:   239, 95, 95;

  /* ── Semantic: Info ──────────────────────────────────────── */
  --color-info:       #4ecac2;
  --color-info-light: #ccfbf1;
  --color-info-dark:  #0d9488;
  --color-info-rgb:   78, 202, 194;

  /* ── Surface Colors (Light Mode) ─────────────────────────────
     All lean warm-peach toward --color-brand-primary.
     base → raised → nav get warmer; sunken/overlay sit between. */
  --color-surface-base:    #ffffff;
  --color-surface-raised:  #faf8f6;
  --color-surface-sunken:  #f7f4f1;
  --color-surface-overlay: #ede9e5;
  --color-surface-nav:     #f8f5f1;

  /* ── Text Colors (Light Mode) ────────────────────────────── */
  --color-text-primary:   #313b5e;
  --color-text-secondary: #5d7186;
  --color-text-muted:     #797b97;
  --color-text-disabled:  #94a3b8;
  --color-text-inverse:   #ffffff;

  /* ── Border Colors ───────────────────────────────────────── */
  --color-border:        #d8dfe7;
  --color-border-subtle: #e2e8f0;
  --color-border-strong: #94a3b8;

  /* ── Spacing Scale (4-pt grid) ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Type Scale ──────────────────────────────────────────── */
  --font-body:    "Play", sans-serif;
  --font-heading: "Hanken Grotesk", sans-serif;
  --font-mono:    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-md:   1.25rem;    /* 20px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ── Border Radius Scale ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadow Scale ────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-4: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-5: 0 20px 60px rgba(0, 0, 0, 0.16);
  --shadow-glass: 0 8px 32px rgba(var(--color-brand-accent-rgb), 0.12);

  /* ── Glass Surface Tokens ────────────────────────────────── */
  /* glass-subtle: light blur, low opacity — cards, sidepanels  */
  --glass-subtle-bg:          rgba(255, 255, 255, 0.40);
  --glass-subtle-blur:        blur(6px);
  --glass-subtle-border:      rgba(255, 255, 255, 0.50);
  --glass-subtle-bg-fallback: rgba(255, 255, 255, 0.88);

  /* glass-standard: medium blur, frosted — navbars, drawers   */
  --glass-standard-bg:          rgba(255, 255, 255, 0.65);
  --glass-standard-blur:        blur(14px);
  --glass-standard-border:      rgba(255, 255, 255, 0.60);
  --glass-standard-bg-fallback: rgba(255, 255, 255, 0.92);

  /* glass-prominent: heavy blur — modals, overlays            */
  --glass-prominent-bg:          rgba(255, 255, 255, 0.82);
  --glass-prominent-blur:        blur(28px);
  --glass-prominent-border:      rgba(255, 255, 255, 0.70);
  --glass-prominent-bg-fallback: rgba(255, 255, 255, 0.96);

  /* ── Motion Tokens ───────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ── Motion Interaction Tokens ──────────────────────────────*/
  --lift-hover: -3px;   /* used by .hover-lift translateY */

  /* Easings: out=enter, in=exit, spring=interactive           */
  --ease-out:    cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --ease-in:     cubic-bezier(0.40, 0.00, 1.00, 1.00);
  --ease-inout:  cubic-bezier(0.40, 0.00, 0.20, 1.00);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);

  /* ── Z-index Scale ───────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-modal:    1050;
  --z-toast:    1080;
  --z-tooltip:  1090;
}

/* ── Dark Mode Overrides ─────────────────────────────────────
   Mirrors the existing data-bs-theme="dark" pattern already
   used by the app's Bootstrap theme config.                   */
[data-bs-theme="dark"] {
  --color-surface-base:    #22282e;
  --color-surface-raised:  #262d34;
  --color-surface-sunken:  #1a1f25;
  --color-surface-overlay: #2f3944;
  --color-surface-nav:     #262d34;

  --color-text-primary:   #aab8c5;
  --color-text-secondary: #9097a7;
  --color-text-muted:     #64748b;
  --color-text-disabled:  #4b5563;

  --color-border:        #2f3944;
  --color-border-subtle: #374151;
  --color-border-strong: #4b5563;

  --glass-subtle-bg:          rgba(30, 41, 59, 0.40);
  --glass-subtle-border:      rgba(255, 255, 255, 0.08);
  --glass-subtle-bg-fallback: rgba(30, 41, 59, 0.88);

  --glass-standard-bg:          rgba(30, 41, 59, 0.65);
  --glass-standard-border:      rgba(255, 255, 255, 0.12);
  --glass-standard-bg-fallback: rgba(30, 41, 59, 0.92);

  --glass-prominent-bg:          rgba(15, 23, 42, 0.82);
  --glass-prominent-border:      rgba(255, 255, 255, 0.15);
  --glass-prominent-bg-fallback: rgba(15, 23, 42, 0.96);
}

/* ── Glass Utility Classes ───────────────────────────────────
   Apply directly to any element. Backdrop-filter requires the
   parent NOT to have overflow:hidden on some browsers.        */
.glass-subtle {
  background:           var(--glass-subtle-bg);
  backdrop-filter:      var(--glass-subtle-blur);
  -webkit-backdrop-filter: var(--glass-subtle-blur);
  border:               1px solid var(--glass-subtle-border);
  box-shadow:           var(--shadow-glass);
}

.glass-standard {
  background:           var(--glass-standard-bg);
  backdrop-filter:      var(--glass-standard-blur);
  -webkit-backdrop-filter: var(--glass-standard-blur);
  border:               1px solid var(--glass-standard-border);
  box-shadow:           var(--shadow-glass);
}

.glass-prominent {
  background:           var(--glass-prominent-bg);
  backdrop-filter:      var(--glass-prominent-blur);
  -webkit-backdrop-filter: var(--glass-prominent-blur);
  border:               1px solid var(--glass-prominent-border);
  box-shadow:           var(--shadow-5);
}

/* ── backdrop-filter fallback ────────────────────────────────
   Browsers without backdrop-filter support get a higher-opacity
   solid background so the surface is still legible.           */
@supports not (backdrop-filter: blur(1px)) {
  .glass-subtle   { background: var(--glass-subtle-bg-fallback);   }
  .glass-standard { background: var(--glass-standard-bg-fallback); }
  .glass-prominent { background: var(--glass-prominent-bg-fallback); }
}