/* ============================================================================
   TIME — PropUp's design system  ·  "Slate & Royal Blue" (2026)
   ----------------------------------------------------------------------------
   Single source of truth for every colour, surface, elevation, type, shadow,
   motion, focus and semantic token of PropUp. Both LIGHT and DARK modes are
   fully defined here in explicit hex. The whole app (CRM + god admin, which
   aliases --app-* via --admin-*) reads these — change a value here and it
   cascades everywhere.

   Palette: cool slate neutrals + a confident royal blue accent (#1E40AF).
   Professional, calm, serious. ONE accent only — status colours (green/amber/
   red) carry meaning, never decoration.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Legacy --sp-* alias layer + .sp-* utility classes + --m3-* shim. */
@import url('/Main%20platform%20Themes/_shared/aliases.css?v=2026-06-27-navy-blue');
@import url('/Main%20platform%20Themes/_shared/components.css?v=2026-06-27-navy-blue');
@import url('/Main%20platform%20Themes/_shared/states.css?v=2026-06-27-navy-blue');

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── SURFACES ───────────────────────────────────────────────────────── */
  --app-bg:               #F8FAFC;   /* slate-50 — page canvas */
  --app-bg-deep:          #F1F5F9;   /* slate-100 — sidebar / sunken strip */
  --app-card:             #FFFFFF;   /* elevated card */
  --app-popover:          #FFFFFF;   /* popover / dropdown */
  --app-muted:            #F1F5F9;   /* slate-100 — hover, soft pill */
  --app-muted-fg:         #0F172A;   /* ink on --app-muted */

  /* ── INK HIERARCHY ──────────────────────────────────────────────────── */
  --app-fg:               #0F172A;   /* slate-900 — headlines, body */
  --app-fg-soft:          #1E293B;   /* slate-800 — body paragraph */
  --app-fg-muted:         #64748B;   /* slate-500 — captions, labels */
  --app-fg-subtle:        #94A3B8;   /* slate-400 — placeholders, hints */

  /* ── BRAND (royal blue) ─────────────────────────────────────────────── */
  --app-primary:          #1E40AF;   /* blue-600 — canonical primary */
  --app-primary-hover:    #1E3A8A;   /* blue-700 */
  --app-primary-fg:       #FFFFFF;
  --app-primary-tint:     rgba(30,64,175,0.08);
  --app-primary-subtle:       var(--app-primary-tint);
  --app-primary-subtle-hover: color-mix(in srgb, var(--app-primary) 14%, transparent);
  --app-primary-border:       color-mix(in srgb, var(--app-primary) 28%, transparent);

  --app-secondary:        #1E40AF;   /* single accent — secondary = primary */
  --app-secondary-hover:  #1E3A8A;
  --app-secondary-fg:     #FFFFFF;
  --app-secondary-tint:   rgba(30,64,175,0.08);

  --app-accent:           #1E40AF;   /* single accent — accent = primary */
  --app-accent-hover:     #1E3A8A;
  --app-accent-fg:        #FFFFFF;
  --app-accent-tint:      rgba(30,64,175,0.08);

  /* ── SEMANTIC (clean status palette) ────────────────────────────────── */
  --app-success:          #16A34A;   /* green-600 */
  --app-success-hover:    #15803D;
  --app-success-fg:       #FFFFFF;
  --app-success-tint:     rgba(22,163,74,0.08);
  --app-warning:          #B45309;   /* amber-700 (AA on white) */
  --app-warning-fg:       #FFFFFF;
  --app-warning-tint:     rgba(180,83,9,0.08);
  --app-info:             #1E40AF;   /* blue = info */
  --app-info-fg:          #FFFFFF;
  --app-info-tint:        rgba(30,64,175,0.08);
  --app-destructive:      #DC2626;   /* red-600 */
  --app-destructive-fg:   #FFFFFF;
  --app-destructive-tint: rgba(220,38,38,0.08);
  --app-danger:           #DC2626;
  --app-danger-fg:        #FFFFFF;

  /* ── BORDERS / INPUTS / FOCUS RING ──────────────────────────────────── */
  --app-border:           #E2E8F0;   /* slate-200 */
  --app-border-soft:      rgba(15,23,42,0.06);   /* slate hairline */
  --app-input:            #E2E8F0;   /* slate-200 */
  --app-ring:             #1E40AF;   /* blue focus ring */

  /* ── RADII (unchanged — sizing approved) ────────────────────────────── */
  --app-radius-xs:        4px;
  --app-radius-sm:        6px;
  --app-radius-md:        8px;
  --app-radius-lg:        12px;
  --app-radius-xl:        16px;
  --app-radius-pill:      9999px;

  /* ── ELEVATION (neutral soft shadows) ───────────────────────────────── */
  --app-shadow-xs:        0 1px 2px rgba(15, 23, 42, 0.04);
  --app-shadow-sm:        0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --app-shadow-md:        0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  --app-shadow-lg:        0 8px 24px -6px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
  --app-shadow-xl:        0 20px 48px -12px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
  --app-shadow:           var(--app-shadow-sm);
  --app-shadow-focus:     0 0 0 3px rgba(30,64,175,0.25);

  /* ── TYPE (unchanged) ───────────────────────────────────────────────── */
  --app-font:             Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-font-sans:        Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-font-display:     Inter, ui-sans-serif, system-ui, sans-serif;
  --app-font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --app-letter-spacing:   -0.005em;

  /* ── MOTION (unchanged) ─────────────────────────────────────────────── */
  --app-ease:             cubic-bezier(0.32, 0.72, 0, 1);
  --app-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --app-dur-fast:         120ms;
  --app-dur-base:         180ms;
  --app-dur-slow:         280ms;

  /* ── TOOLTIP (dark surface, light text) ─────────────────────────────── */
  --app-tooltip-bg:       #0F172A;
  --app-tooltip-fg:       #FFFFFF;

  /* ── BRAND TOKENS (marketing — also defined in globals.css) ─────────── */
  --brand-ink:                    #0F172A;
  --brand-navy:                   #1E3A8A;
  --brand-blue:                   #1E40AF;
  --brand-paper:                  #F8FAFC;
  --brand-mist:                   #F1F5F9;

  /* ── COMPAT ALIASES — shadcn primitives + legacy code follow these ── */
  --background:           #FFFFFF;
  --foreground:           #0F172A;
  --surface:              #F8FAFC;
  --card:                 #FFFFFF;
  --card-foreground:      #0F172A;
  --popover:              #FFFFFF;
  --popover-foreground:   #0F172A;
  --primary:              #1E40AF;
  --primary-foreground:   #FFFFFF;
  --secondary:            #1E40AF;
  --secondary-foreground: #FFFFFF;
  --muted:                #F1F5F9;
  --muted-foreground:     #64748B;
  --accent:               #1E40AF;
  --accent-foreground:    #FFFFFF;
  --destructive:          #DC2626;
  --destructive-foreground: #FFFFFF;
  --border:               #E2E8F0;
  --border-token:         rgba(15,23,42,0.06);
  --input:                #E2E8F0;
  --ring:                 #1E40AF;
  --radius:               8px;
  --ink:                  #0F172A;
  --ink-muted:            #64748B;
  --ink-subdued:          #94A3B8;
  --primary-dark:         #1E3A8A;

  color-scheme: light;
}

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE — cool slate, lifted blue, clear elevation.
   ════════════════════════════════════════════════════════════════════════ */
:root[data-mode="dark"] {
  /* ── SURFACES ───────────────────────────────────────────────────────── */
  --app-bg:               #0F172A;   /* slate-900 — page canvas */
  --app-bg-deep:          #020617;   /* slate-950 — sunken / sidebar */
  --app-card:             #1E293B;   /* slate-800 — card (elevated) */
  --app-popover:          #334155;   /* slate-700 — popover (floats above) */
  --app-muted:            #1E293B;   /* slate-800 — hover, soft pill */
  --app-muted-fg:         #F8FAFC;   /* ink on --app-muted */

  /* ── INK HIERARCHY ──────────────────────────────────────────────────── */
  --app-fg:               #F8FAFC;   /* slate-50 */
  --app-fg-soft:          #E2E8F0;   /* slate-200 */
  --app-fg-muted:         #94A3B8;   /* slate-400 */
  --app-fg-subtle:        #64748B;   /* slate-500 */

  /* ── BRAND (lifted royal blue) ──────────────────────────────────────── */
  --app-primary:          #3B82F6;   /* blue-500 */
  --app-primary-hover:    #60A5FA;   /* blue-400 */
  --app-primary-fg:       #FFFFFF;
  --app-primary-tint:     rgba(59,130,246,0.15);

  --app-secondary:        #3B82F6;
  --app-secondary-hover:  #60A5FA;
  --app-secondary-fg:     #FFFFFF;
  --app-secondary-tint:   rgba(59,130,246,0.15);

  --app-accent:           #3B82F6;
  --app-accent-hover:     #60A5FA;
  --app-accent-fg:        #FFFFFF;
  --app-accent-tint:      rgba(59,130,246,0.15);

  /* ── SEMANTIC ───────────────────────────────────────────────────────── */
  --app-success:          #22C55E;   /* green-500 */
  --app-success-hover:    #4ADE80;
  --app-success-fg:       #052E16;
  --app-success-tint:     rgba(34,197,94,0.15);
  --app-warning:          #F59E0B;   /* amber-500 */
  --app-warning-fg:       #1A1A1A;
  --app-warning-tint:     rgba(245,158,11,0.15);
  --app-info:             #3B82F6;
  --app-info-fg:          #FFFFFF;
  --app-info-tint:        rgba(59,130,246,0.15);
  --app-destructive:      #EF4444;   /* red-500 */
  --app-destructive-fg:   #FFFFFF;
  --app-destructive-tint: rgba(239,68,68,0.15);
  --app-danger:           #EF4444;
  --app-danger-fg:        #FFFFFF;

  /* ── BORDERS / INPUTS / FOCUS RING ──────────────────────────────────── */
  --app-border:           #1E293B;   /* slate-800 */
  --app-border-soft:      rgba(255,255,255,0.08);
  --app-input:            #334155;   /* slate-700 — visible field border */
  --app-ring:             #3B82F6;

  /* ── ELEVATION ─────────────────────────────────────────────────────── */
  --app-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.32);
  --app-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.40), 0 12px 28px -6px rgba(0, 0, 0, 0.50);
  --app-shadow-md:        0 6px 14px -3px rgba(0, 0, 0, 0.55);
  --app-shadow-lg:        0 14px 32px -10px rgba(0, 0, 0, 0.65);
  --app-shadow-xl:        0 28px 56px -14px rgba(0, 0, 0, 0.75);
  --app-shadow:           var(--app-shadow-sm);
  --app-shadow-focus:     0 0 0 3px rgba(59,130,246,0.35);

  /* ── TOOLTIP ───────────────────────────────────────────────────────── */
  --app-tooltip-bg:       #334155;
  --app-tooltip-fg:       #F8FAFC;

  /* ── COMPAT ALIASES ────────────────────────────────────────────────── */
  --background:           #1E293B;
  --foreground:           #F8FAFC;
  --surface:              #0F172A;
  --card:                 #1E293B;
  --card-foreground:      #F8FAFC;
  --popover:              #334155;
  --popover-foreground:   #F8FAFC;
  --primary:              #3B82F6;
  --primary-foreground:   #FFFFFF;
  --secondary:            #3B82F6;
  --secondary-foreground: #FFFFFF;
  --muted:                #1E293B;
  --muted-foreground:     #94A3B8;
  --accent:               #3B82F6;
  --accent-foreground:    #FFFFFF;
  --destructive:          #EF4444;
  --destructive-foreground: #FFFFFF;
  --border:               #1E293B;
  --border-token:         rgba(255,255,255,0.08);
  --input:                #334155;
  --ring:                 #3B82F6;
  --radius:               8px;
  --ink:                  #F8FAFC;
  --ink-muted:            #94A3B8;
  --ink-subdued:          #64748B;
  --primary-dark:         #60A5FA;

  color-scheme: dark;
}

/* High-contrast mode — boost text + border weight for AAA compliance. */
:root[data-high-contrast="true"] {
  --app-fg:            #000000;
  --app-fg-muted:      #0F172A;
  --app-border:        #0F172A;
  --app-border-soft:   rgba(15,23,42,0.30);
}
:root[data-mode="dark"][data-high-contrast="true"] {
  --app-fg:            #FFFFFF;
  --app-fg-muted:      #F8FAFC;
  --app-border:        #FFFFFF;
  --app-border-soft:   rgba(255,255,255,0.40);
}

/* ════════════════════════════════════════════════════════════════════════
   BASE ELEMENT WIRING — body, links, focus, selection, scrollbars.
   ════════════════════════════════════════════════════════════════════════ */

html, body {
  background-color: var(--app-bg);
  color: var(--app-fg);
}
body {
  font-family: var(--app-font-sans);
  letter-spacing: var(--app-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--app-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:root[data-mode="dark"] a { color: var(--app-info); }

:focus-visible {
  outline: 0;
  box-shadow: var(--app-shadow-focus);
  border-radius: 4px;
}

::selection {
  background: var(--app-primary-tint);
  color: var(--app-fg);
}
:root[data-mode="dark"] ::selection {
  background: var(--app-primary);
  color: var(--app-primary-fg);
}

@supports (scrollbar-color: auto) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--app-fg-muted) transparent;
  }
}