/* ============================================================
   PetaCore Design System — Colors & Type
   ------------------------------------------------------------
   Single source of truth for tokens used across the admin
   dashboard, captive portal, and any spin-off surfaces.

   Mirrors `frontend/src/index.css` from the codebase, plus
   semantic typography vars (h1 / body / mono / etc.) layered
   on top so non-Tailwind contexts have the same primitives.
   ============================================================ */

/* ---------- Webfonts ----------
   The product loads Inter from Google Fonts. We mirror that
   here AND keep `Segoe UI` as the secondary stack — PetaCore
   leans Microsoft/Azure visually, so on Windows it falls back
   to the native UI typeface for free.                            */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   :root — light theme tokens (default)
   ============================================================ */
:root {
  /* ---------- Brand & accent ----------
     Two deliberate blues:
     --brand    Microsoft-Azure blue, used on chrome (sidebar
                active rail, top-nav avatar, tabs underline,
                tenant pill). Identity colour.
     --accent   Slightly darker, used for INTERACTIVE elements
                (primary buttons, links, focus rings, info pills).
     They share a hue family so the UI reads as one palette.    */
  --brand:           #0078d4;
  --brand-hover:     #106ebe;
  --brand-contrast:  #ffffff;
  --brand-subtle:    #e5f1fb;

  --accent:          #0f5fd4;
  --accent-light:    #e0ebff;
  --accent-hover:    #0a4bab;

  /* Primary scale (Tailwind `primary-50…900`) — for charts,
     gradients, badges, hover variants, etc.                   */
  --primary-50:  #f0f5ff;
  --primary-100: #e0ebff;
  --primary-200: #b8d4fe;
  --primary-300: #85b8fd;
  --primary-400: #4d96fa;
  --primary-500: #1a73e8;
  --primary-600: #0f5fd4;   /* = --accent */
  --primary-700: #0a4bab;
  --primary-800: #063a87;
  --primary-900: #042c6a;

  /* ---------- Surfaces ---------- */
  --bg-page:           #f8f9fc;
  --bg-surface:        #ffffff;
  --bg-surface-hover:  #f3f4f6;
  --bg-elevated:       #f3f4f6;
  --bg-sidebar:        #ffffff;
  --bg-topnav:         #ffffff;
  --bg-input:          #f9fafb;
  --bg-table-header:   #f8f9fa;
  --bg-card:           #ffffff;

  /* ---------- Borders ---------- */
  --border-default:  #e5e7eb;
  --border-light:    #f3f4f6;
  --border-sidebar:  #e5e7eb;

  /* ---------- Text ---------- */
  --text-primary:    #111827;
  --text-secondary:  #6b7280;
  --text-tertiary:   #9ca3af;
  --text-on-primary: #ffffff;

  /* ---------- Status ---------- */
  --success:    #059669;
  --success-bg: #ecfdf5;
  --warning:    #d97706;
  --warning-bg: #fffbeb;
  --danger:     #dc2626;
  --danger-bg:  #fef2f2;

  /* ---------- Shadows ----------
     Card sits gently on the page; dropdown lifts more.      */
  --shadow-card:     0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.03);
  --shadow-card-hover: 0 4px 12px 0 rgba(0,0,0,0.08);
  --shadow-sidebar:  1px 0 3px 0 rgba(0,0,0,0.04);
  --shadow-dropdown: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ---------- Spacing scale ---------- */
  --space-0:  0px;
  --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;

  /* ---------- Typography — base ---------- */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Roboto Mono',
               Menlo, Consolas, monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

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

  /* Type scale (px → rem-comparable values, kept px for fidelity to product) */
  --text-2xs: 10px;   /* sidebar group labels, kbd hint, fine print           */
  --text-xs:  11px;   /* meta, breadcrumbs, table headers                     */
  --text-sm:  13px;   /* default UI body — buttons, inputs, table cells       */
  --text-base:14px;   /* paragraph copy                                       */
  --text-md:  15px;   /* sidebar logo wordmark                                */
  --text-lg:  18px;   /* section heading                                      */
  --text-xl:  20px;   /* page title                                           */
  --text-2xl: 24px;   /* portal Welcome!, marketing hero                      */
  --text-3xl: 30px;   /* dashboard big number                                 */
  --text-4xl: 36px;
}

/* ============================================================
   .dark — dark theme overrides
   Applied via `<html class="dark">` (ThemeContext toggles this).
   ============================================================ */
.dark {
  --bg-page:          #111827;
  --bg-surface:       #1f2937;
  --bg-surface-hover: #374151;
  --bg-elevated:      #374151;
  --bg-sidebar:       #111827;
  --bg-topnav:        #1f2937;
  --bg-input:         #374151;
  --bg-table-header:  #1f2937;
  --bg-card:          #1f2937;

  --border-default: #374151;
  --border-light:   #4b5563;
  --border-sidebar: #1f2937;

  --text-primary:   #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary:  #9ca3af;

  --accent:        #60a5fa;
  --accent-light:  #1e3a5f;
  --accent-hover:  #93c5fd;

  --brand:          #4cc2ff;
  --brand-hover:    #83d1ff;
  --brand-contrast: #0b1320;
  --brand-subtle:   #0f2a44;

  --success:    #34d399;
  --success-bg: #064e3b;
  --warning:    #fbbf24;
  --warning-bg: #78350f;
  --danger:     #f87171;
  --danger-bg:  #7f1d1d;

  --shadow-card:     0 1px 3px 0 rgba(0,0,0,0.3);
  --shadow-dropdown: 0 10px 15px -3px rgba(0,0,0,0.4);
}

/* ============================================================
   Semantic typography roles
   ------------------------------------------------------------
   Each role is BOTH a CSS variable (for spread into `style={}`)
   AND a class (for direct use). Reach for these instead of
   re-deriving sizes per component.
   ============================================================ */
:root {
  /* role  ──   font     │ size            │ weight                │ line-height       │ tracking */
  --type-display:   var(--font-sans) var(--text-3xl)/var(--leading-tight)   var(--weight-bold);
  --type-h1:        var(--font-sans) var(--text-xl)/var(--leading-snug)    var(--weight-semibold);
  --type-h2:        var(--font-sans) var(--text-lg)/var(--leading-snug)    var(--weight-semibold);
  --type-h3:        var(--font-sans) var(--text-base)/var(--leading-snug)  var(--weight-semibold);
  --type-body:      var(--font-sans) var(--text-sm)/var(--leading-normal)  var(--weight-regular);
  --type-body-lg:   var(--font-sans) var(--text-base)/var(--leading-normal) var(--weight-regular);
  --type-meta:      var(--font-sans) var(--text-xs)/var(--leading-snug)    var(--weight-regular);
  --type-overline:  var(--font-sans) var(--text-2xs)/var(--leading-tight)  var(--weight-semibold);
  --type-mono:      var(--font-mono) var(--text-sm)/var(--leading-snug)    var(--weight-regular);
}

.t-display  { font: 700 30px/1.2  var(--font-sans); color: var(--text-primary); letter-spacing: -0.02em; }
.t-h1       { font: 600 20px/1.35 var(--font-sans); color: var(--text-primary); }
.t-h2       { font: 600 18px/1.35 var(--font-sans); color: var(--text-primary); }
.t-h3       { font: 600 14px/1.35 var(--font-sans); color: var(--text-primary); }
.t-body-lg  { font: 400 14px/1.5  var(--font-sans); color: var(--text-primary); }
.t-body     { font: 400 13px/1.5  var(--font-sans); color: var(--text-primary); }
.t-meta     { font: 400 11px/1.35 var(--font-sans); color: var(--text-secondary); }
.t-meta-strong { font: 500 11px/1.35 var(--font-sans); color: var(--text-secondary); }
.t-overline { font: 600 10px/1.2  var(--font-sans); color: var(--text-tertiary);
              text-transform: uppercase; letter-spacing: 0.06em; }
.t-mono     { font: 400 13px/1.4  var(--font-mono); color: var(--text-primary); }

.t-success { color: var(--success); }
.t-warning { color: var(--warning); }
.t-danger  { color: var(--danger); }
.t-accent  { color: var(--accent); }
.t-muted   { color: var(--text-secondary); }
.t-subtle  { color: var(--text-tertiary); }

/* ============================================================
   Reset bits when this stylesheet is the only one loaded
   (e.g. preview cards, slides). Tailwind preflight covers this
   for the real product, but the design-system pages reach for
   colors_and_type.css standalone.
   ============================================================ */
html { text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }