/*
 * BellSystems Control Panel v2 — Design Tokens
 * Source of truth: .stitch/DESIGN.md + DESIGN.md
 *
 * This is a dark-first design system. :root defines the dark (default) theme.
 * [data-theme="light"] overrides are placeholders for a future light variant.
 *
 * NEVER write raw hex, rgb, or pixel values in component files.
 * ALWAYS use var(--token-name).
 */

/* ==========================================================================
   IMPORT
   ========================================================================== */

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

/* ==========================================================================
   ROOT — Dark Theme (Default)
   The entire design system is dark-first. :root = dark = default.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     BACKGROUND SURFACES
     7-step tonal ladder from deepest well to frosted glass.
     Hierarchy is achieved through surface tone — never borders.
     -------------------------------------------------------------------------- */

  --color-bg-abyss:    #0a0e14;   /* Deepest: nested content, code blocks       */
  --color-bg-base:     #10141a;   /* Midnight: main viewport / page background  */
  --color-bg-void:     #181c22;   /* Sidebar, header, secondary nav surfaces     */
  --color-bg-surface:  #1c2026;   /* Deep Slate: default card / panel background */
  --color-bg-elevated: #262a31;   /* Elevated Slate: raised cards, hovered rows  */
  --color-bg-island:   #31353c;   /* Island: active states, selected rows        */
  --color-bg-float:    rgba(53, 57, 64, 0.80); /* Frosted Glass: modals/dropdowns + blur(12px) */

  /* --------------------------------------------------------------------------
     BRAND / PRIMARY ACCENT
     Indigo Glow → Violet Pulse gradient pair is the signature of the system.
     -------------------------------------------------------------------------- */

  --color-primary:          #c0c1ff;   /* Indigo Glow: CTAs, active nav, key metrics  */
  --color-primary-hover:    #d2bbff;   /* Violet Pulse: hover, gradient endpoint       */
  --color-primary-container:#8083ff;   /* Lavender Soft: container fills               */
  --color-primary-subtle:   rgba(128, 131, 255, 0.12); /* Faint tint for hover bg     */
  --color-primary-deep:     #6001d1;   /* Deep Indigo: secondary container fills       */
  --color-primary-inverse:  #494bd6;   /* Royal Indigo: on light-over-dark contexts    */

  /* Gradient — used for primary button fills and accent decorations */
  --gradient-primary: linear-gradient(135deg, #c0c1ff 0%, #d2bbff 100%);

  /* --------------------------------------------------------------------------
     TERTIARY / INFO ACCENT
     Aqua Sky: data viz, device status indicators
     -------------------------------------------------------------------------- */

  --color-tertiary:          #7bd0ff;  /* Aqua Sky                                    */
  --color-tertiary-container:#009bd1;  /* Ocean: tertiary container                   */

  /* --------------------------------------------------------------------------
     SEMANTIC / STATE COLORS
     Never bright/saturated — always "glowing ink" style on dark surfaces.
     -------------------------------------------------------------------------- */

  --color-success:    #4ade80;   /* Emerald: online / active device status             */
  --color-success-bg: rgba(74, 222, 128, 0.12); /* Soft emerald glow bg               */

  --color-warning:    #fbbf24;   /* Amber: pending / warning status                    */
  --color-warning-bg: rgba(251, 191, 36, 0.12); /* Soft amber glow bg                 */

  --color-danger:     #ff5c5c;   /* Vivid Coral: error text, destructive labels         */
  --color-danger-bg:  rgba(255, 92, 92, 0.12);  /* Coral at low opacity                */
  --color-danger-container: #c0392b; /* Rich Red: error container backgrounds          */

  --color-info:       #7bd0ff;   /* Aqua Sky: informational state                      */
  --color-info-bg:    rgba(123, 208, 255, 0.12);

  /* --------------------------------------------------------------------------
     TEXT COLORS
     4-step text hierarchy. Body copy is never pure white.
     -------------------------------------------------------------------------- */

  --color-text-primary:    #dfe2eb;   /* Cloud: body copy, data values, headings         */
  --color-text-secondary:  #c7c4d7;   /* Mist: labels, metadata, inactive nav            */
  --color-text-muted:      #908fa0;   /* Ghost: placeholders, disabled, category headers */
  --color-text-more-muted: #908fa08e;   
  --color-text-inverse:    #10141a;   /* Midnight: text on primary/accent backgrounds    */
  --color-text-accent:     #c0c1ff;   /* Indigo Glow: active nav, links, highlights      */

  /* --------------------------------------------------------------------------
     BORDERS
     The "No Raw Border" rule: visible boundaries use Boundary color at ≤20% opacity.
     Hard full-opacity borders are forbidden.
     -------------------------------------------------------------------------- */

  --color-border:        rgba(70, 69, 84, 0.20);  /* Ghost border: resting inputs, outlines  */
  --color-border-strong: rgba(70, 69, 84, 0.45);  /* Slightly stronger: secondary buttons    */
  --color-border-focus:  rgba(192, 193, 255, 0.40); /* Indigo Glow 40%: focus ring halo      */
  --color-border-raw:    #464554;   /* Boundary raw: scrollbar thumb, reference only    */

  /* --------------------------------------------------------------------------
     SIDEBAR
     224px wide, Void Navy background. Active state = 3px Indigo bar, no bg fill.
     -------------------------------------------------------------------------- */

  --color-sidebar-bg:          #181c22;  /* Void Navy                                   */
  --color-sidebar-text:        #94a3b8;  /* Slate-400: nav item default text            */
  --color-sidebar-text-muted:  rgba(100, 116, 139, 0.75); /* Slate-500 at 75%: section labels */
  --color-sidebar-text-more-muted: rgba(100, 116, 139, 0.30); /* Slate-500 at 50%: disabled nav items */
  --color-sidebar-active-bg:   transparent; /* No fill — left bar IS the indicator      */
  --color-sidebar-active-text: #ffffff;  /* Pure white: selected nav item text          */
  --color-sidebar-active-bar:  #c0c1ff;  /* 3px left-edge active indicator              */
  --color-sidebar-hover-bg:    rgba(49, 53, 60, 0.50); /* Island at 50%                */

  /* Row tint — alternating table rows: a faint indigo-tinted veil */
  --color-tint-row: rgba(192, 193, 255, 0.045);

  --sidebar-width:        224px;
  --sidebar-width-collapsed: 56px;

  /* --------------------------------------------------------------------------
     HEADER
     -------------------------------------------------------------------------- */

  --color-header-bg:     #181c22;  /* Void Navy — matches sidebar                       */
  --header-height:       56px;

  /* ==========================================================================
     TYPOGRAPHY
     Two-font system: Onest (body/UI) + Barlow Condensed (display/headings).
     JetBrains Mono for all code, data, and terminal content.
     ========================================================================== */

  /*
   * Onest — Ukrainian geometric grotesque. Distinctive numerics, confident
   * letterforms, excellent at 14px. Not the usual Inter/Space Grotesk rut.
   *
   * Barlow Condensed — Industrial condensed grotesque. Engineered feeling at
   * display sizes. Instantly distinguishes headings from body without relying
   * on weight alone. Rarely used in SaaS admin tools.
   */

  --font-family-base:    'Onest', system-ui, sans-serif;
  --font-family-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-family-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', 'Menlo', monospace;
  --font-family-sidebar: 'Inter', system-ui, sans-serif;  /* Sidebar nav — clean geometric grotesque */

  /* Font sizes — mapped to the 5 Stitch type levels + intermediate steps */
  --font-size-2xs:  0.625rem;   /* 10px  — Sidebar section headers, micro labels       */
  --font-size-xs:   0.6875rem;  /* 11px  — Label: sidebar category, all-caps chips     */
  --font-size-sm:   0.75rem;    /* 12px  — Captions, helper text                       */
  --font-size-base: 0.875rem;   /* 14px  — Body: default text, table rows              */
  --font-size-md:   1rem;       /* 16px  — Title: card titles, module headers          */
  --font-size-lg:   1.125rem;   /* 18px  — Subheadings, section intros                 */
  --font-size-xl:   1.5rem;     /* 24px  — Headline: page titles, major headings       */
  --font-size-2xl:  3.5rem;     /* 56px  — Display: hero KPI metrics, total counts     */

  /* Font weights */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --line-height-tight:   1.2;    /* Tighter for Barlow Condensed headings */
  --line-height-base:    1.5;
  --line-height-relaxed: 1.75;

  /* Letter spacing */
  --tracking-normal:   0em;
  --tracking-snug:     0.04em;   /* Sidebar section labels — uppercase, tight but readable */
  --tracking-wide:     0.08em;   /* Chip labels, all-caps badges */
  --tracking-tight:   -0.01em;   /* Barlow Condensed headings — tighten at display size */
  --tracking-display: -0.02em;   /* Hero KPI numbers */

  /* ==========================================================================
     SPACING
     4px base unit. All spacing must use tokens — no arbitrary values.
     ========================================================================== */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-32: 128px;

  /* ==========================================================================
     CONTENT WIDTH
     Used by .page-wrapper--centered to constrain and center narrow-content pages.
     Full-width pages (.page-wrapper default) ignore these.
     ========================================================================== */

  --content-max-width-xs:         480px;   /* Tiny forms, login, auth pages          */
  --content-max-width-sm:         640px;   /* Small forms, simple settings pages     */
  --content-max-width-md:         800px;   /* Medium forms, detail-light pages       */
  --content-max-width-lg:         1024px;  /* Moderate-width pages                   */
  --content-max-width-ultrawide:  2000px;  /* Ultrawide cap — page-wrapper--capped   */

  /* ==========================================================================
     BORDER RADIUS
     Minimal rounding — purposeful, not playful.
     ========================================================================== */

  --radius-sm:   4px;      /* Subtle: small tags, inline chips                        */
  --radius-md:   6px;      /* Default: buttons, inputs, table cells                   */
  --radius-lg:   8px;      /* Cards, panels — the signature "just softened" corners   */
  --radius-xl:   12px;     /* Modals, large containers                                */
  --radius-full: 9999px;   /* Pills: status badges, avatars — "glowing ink" shape     */

  /* ==========================================================================
     SHADOWS & ELEVATION
     No drop shadows on standard cards. Hierarchy = surface tone steps.
     Card glow mimics ceiling light reflecting off glass surface.
     ========================================================================== */

  /* Card inner glow — the top-edge "glass ceiling" reflection */
  --shadow-card:  inset 0px 1px 0px rgba(192, 193, 255, 0.05);

  /* Subtle outer lift — barely perceptible */
  --shadow-sm:    0px 2px 8px rgba(10, 14, 20, 0.40);

  /* Cards with elevation */
  --shadow-md:    0px 4px 16px rgba(10, 14, 20, 0.50);

  /* Modals, dropdowns — navy-tinted, never pure black */
  --shadow-lg:    0px 8px 24px rgba(13, 17, 23, 0.60);

  /* Focus ring glow — used on interactive elements */
  --shadow-focus: 0px 0px 0px 3px rgba(192, 193, 255, 0.20);

  /* Button hover glows — each variant has a colour-matched halo */
  --shadow-primary-glow: 0px 4px 16px rgba(192, 193, 255, 0.28);
  --shadow-danger-glow:  0px 4px 16px rgba(255, 92,  92,  0.40);
  --shadow-success-glow: 0px 4px 16px rgba(74,  222, 128, 0.35);

  /* Glassmorphism backdrop */
  --blur-modal: blur(12px);

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ==========================================================================
     RESPONSIVE BREAKPOINTS
     ========================================================================== */

  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;

  /* ==========================================================================
     Z-INDEX STACK
     ========================================================================== */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ==========================================================================
     MAIL PAGE — Segmented filter color palette
     Soft pastels used for the SegmentedControl active states on the mail
     filter toolbar. Named by semantic role so they read clearly in code.
     Each token is a pair: -bg (active background fill) and -text (label).
     Edit these values to retheme the mail filter buttons globally.
     ========================================================================== */

  /* Direction: Inbox / Sent */
  --mail-filter-inbox-bg:    rgba(74, 222, 128, 0.16);    /* Pastel green     */
  --mail-filter-inbox-text:  #6ee7a0;
  --mail-filter-sent-bg:     rgba(123, 208, 255, 0.16);   /* Pastel teal/blue */
  --mail-filter-sent-text:   #7bd0ff;

  /* Audience: All Messages / Clients Only */
  --mail-filter-all-bg:      rgba(251, 191, 36, 0.15);    /* Pastel yellow    */
  --mail-filter-all-text:    #fcd34d;
  --mail-filter-clients-bg:  rgba(74, 222, 128, 0.16);    /* Pastel green     */
  --mail-filter-clients-text:#6ee7a0;

  /* Mailbox: Sales / Support / Both (All) */
  --mail-filter-sales-bg:    rgba(251, 146, 60, 0.16);    /* Pastel orange    */
  --mail-filter-sales-text:  #fdba74;
  --mail-filter-support-bg:  rgba(255, 92, 92, 0.16);     /* Pastel red/coral */
  --mail-filter-support-text:#ff8a8a;
  --mail-filter-both-bg:     rgba(74, 222, 128, 0.16);    /* Pastel green     */
  --mail-filter-both-text:   #6ee7a0;

  /* Read state: All / Unread / Read / Bookmarked */
  --mail-filter-unread-bg:   rgba(74, 222, 128, 0.16);    /* Pastel green     */
  --mail-filter-unread-text: #6ee7a0;
  --mail-filter-read-bg:     rgba(123, 208, 255, 0.16);   /* Pastel light blue */
  --mail-filter-read-text:   #7bd0ff;
  --mail-filter-bookmarked-bg:  rgba(255, 92, 92, 0.16);  /* Pastel red/coral */
  --mail-filter-bookmarked-text:#ff8a8a;

  /* ==========================================================================
     SCROLLBAR
     4px slim, near-invisible until sought out.
     ========================================================================== */

  --scrollbar-width:  4px;
  --scrollbar-thumb:  #464554;
  --scrollbar-track:  transparent;
  --scrollbar-radius: 2px;
}

/* ==========================================================================
   DARK THEME — Explicit override (same as :root, dark is the default)
   Setting data-theme="dark" on <html> forces dark regardless of system pref.
   ========================================================================== */

[data-theme="dark"] {
  --color-bg-abyss:    #0a0e14;
  --color-bg-base:     #10141a;
  --color-bg-void:     #181c22;
  --color-bg-surface:  #1c2026;
  --color-bg-elevated: #262a31;
  --color-bg-island:   #31353c;
  --color-bg-float:    rgba(53, 57, 64, 0.80);

  --color-primary:          #c0c1ff;
  --color-primary-hover:    #d2bbff;
  --color-primary-container:#8083ff;
  --color-primary-subtle:   rgba(128, 131, 255, 0.12);
  --color-primary-deep:     #6001d1;
  --color-primary-inverse:  #494bd6;
  --gradient-primary:       linear-gradient(135deg, #c0c1ff 0%, #d2bbff 100%);

  --color-tertiary:          #7bd0ff;
  --color-tertiary-container:#009bd1;

  --color-success:    #4ade80;
  --color-success-bg: rgba(74, 222, 128, 0.12);
  --color-warning:    #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-danger:     #ff5c5c;
  --color-danger-bg:  rgba(255, 92, 92, 0.12);
  --color-danger-container: #c0392b;
  --color-info:       #7bd0ff;
  --color-info-bg:    rgba(123, 208, 255, 0.12);

  --color-text-primary:   #dfe2eb;
  --color-text-secondary: #c7c4d7;
  --color-text-muted:     #908fa0;
  --color-text-inverse:   #10141a;
  --color-text-accent:    #c0c1ff;

  --color-border:        rgba(70, 69, 84, 0.20);
  --color-border-strong: rgba(70, 69, 84, 0.45);
  --color-border-focus:  rgba(192, 193, 255, 0.40);

  --color-sidebar-bg:          #181c22;
  --color-sidebar-text:        #94a3b8;
  --color-sidebar-text-muted:  rgba(100, 116, 139, 0.75);
  --color-sidebar-active-bg:   transparent;
  --color-sidebar-active-text: #ffffff;
  --color-sidebar-active-bar:  #c0c1ff;
  --color-sidebar-hover-bg:    rgba(49, 53, 60, 0.50);

  --color-header-bg: #181c22;
}

/* ==========================================================================
   LIGHT THEME — Placeholder for future light mode
   TODO: Design a light variant when required.
   ========================================================================== */

[data-theme="light"] {
  /* Surface inversions */
  --color-bg-abyss:   #f0f2f7;
  --color-bg-base:    #ffffff;
  --color-bg-void:    #f5f6fa;
  --color-bg-surface: #ffffff;
  --color-bg-elevated:#f0f2f7;
  --color-bg-island:  #e4e6ed;
  --color-bg-float:   rgba(255, 255, 255, 0.90);

  /* Keep brand colors — they work on light too */
  --color-primary:          #4a4de0;
  --color-primary-hover:    #6001d1;
  --color-primary-container:#e8e8ff;
  --color-primary-subtle:   rgba(74, 77, 224, 0.08);
  --gradient-primary:       linear-gradient(135deg, #4a4de0 0%, #6001d1 100%);

  /* Text inversions */
  --color-text-primary:   #0a0e14;
  --color-text-secondary: #3a3852;
  --color-text-muted:     #6b6880;
  --color-text-inverse:   #ffffff;
  --color-text-accent:    #4a4de0;

  /* Borders */
  --color-border:        rgba(70, 69, 84, 0.15);
  --color-border-strong: rgba(70, 69, 84, 0.30);
  --color-border-focus:  rgba(74, 77, 224, 0.40);

  /* Sidebar */
  --color-sidebar-bg:          #f5f6fa;
  --color-sidebar-text:        #3a3852;
  --color-sidebar-text-muted:  #6b6880;
  --color-sidebar-active-bg:   transparent;
  --color-sidebar-active-text: #4a4de0;
  --color-sidebar-active-bar:  #4a4de0;
  --color-sidebar-hover-bg:    rgba(74, 77, 224, 0.06);

  --color-header-bg: #ffffff;

  /* Shadows — lighter for light mode */
  --shadow-card:        0px 1px 3px rgba(10, 14, 20, 0.08);
  --shadow-sm:          0px 1px 4px rgba(10, 14, 20, 0.08);
  --shadow-md:          0px 2px 8px rgba(10, 14, 20, 0.10);
  --shadow-lg:          0px 8px 24px rgba(10, 14, 20, 0.12);
  --shadow-focus:       0px 0px 0px 3px rgba(74, 77, 224, 0.20);
  --shadow-primary-glow: 0px 4px 16px rgba(74, 77, 224, 0.20);
  --shadow-danger-glow:  0px 4px 16px rgba(255, 92,  92,  0.35);
  --shadow-success-glow: 0px 4px 16px rgba(74,  222, 128, 0.30);
}
