/* ─────────────────────────────────────────────────────────────────────────
   LibriDigi theme — turquoise on dark
   Defines CSS custom properties consumed by components.css / users.css /
   public.css. Theme files only set tokens; layout lives in zone CSS.
   ───────────────────────────────────────────────────────────────────────── */

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

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --primary:        #14b8a6;     /* turquoise */
    --primary-hover:  #0f9488;
    --primary-fade:   #ccfbf1;
    --primary-2:      #134e4a;
    --secondary:      #6366f1;     /* indigo accent */
    --highlight:      #5eead4;
    --accent:         #5eead4;

    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --bg-color:       #f7f9fb;     /* page background */
    --bg-card:        #ffffff;     /* cards / panels */
    --bg-muted:       #f1f5f9;     /* subtle band */
    --bg-sidenav:     #0f172a;     /* deep slate for sidenav */
    --bg-sidenav-2:   #1e293b;
    --bg-footer:      #0f172a;
    --bg-footer-foot: #020617;
    --bg-gradient:    linear-gradient(180deg, #0f172a 0%, #1e293b 100%);

    /* ── Text ──────────────────────────────────────────────────────────── */
    --text-color:        #0f172a;
    --text-color-light:  #64748b;
    --text-color-dark:   #020617;
    --text-muted:        #64748b;
    --text-on-primary:   #ffffff;
    --nav-color:         #cbd5e1;
    --nav-color-hover:   #ffffff;
    --link:              #0d9488;
    --link-hover:        #14b8a6;

    /* ── Borders & radii ───────────────────────────────────────────────── */
    --border-color:   #e2e8f0;
    --border-soft:    #f1f5f9;
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      12px;
    --radius-xl:      16px;

    /* ── Status ────────────────────────────────────────────────────────── */
    --info:    #0ea5e9;
    --success: #10b981;
    --warning: #f59e0b;
    --danger:  #ef4444;
    --light:   #f8fafc;
    --dark:    #0f172a;

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px 0 rgba(15,23,42,.05);
    --shadow:    0 1px 3px 0 rgba(15,23,42,.08), 0 1px 2px -1px rgba(15,23,42,.04);
    --shadow-md: 0 4px 12px -2px rgba(15,23,42,.10), 0 2px 6px -3px rgba(15,23,42,.06);
    --shadow-lg: 0 12px 32px -4px rgba(15,23,42,.16), 0 6px 12px -4px rgba(15,23,42,.08);

    /* ── Motion ────────────────────────────────────────────────────────── */
    --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
    --transition:      200ms cubic-bezier(.4,0,.2,1);
    --transition-slow: 320ms cubic-bezier(.4,0,.2,1);

    /* ── Type ──────────────────────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* ── Semantic tokens (added for tokenised framework css) ── */
  --primary-soft: #e3f6f4;
  --primary-strong: #0b655b;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --on-primary: #ffffff;
  --on-secondary: var(--text-color-dark);
  --on-success: #ffffff;
  --on-danger: #ffffff;
  --on-warning: #7c2d12;
  --on-info: #ffffff;
  --on-highlight: #ffffff;
  --on-dark: #ffffff;
  --success-bg: #d1fae5;
  --success-text: #065f46;
  --danger-bg: #fee2e2;
  --danger-text: #b91c1c;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --info-bg: #eff6ff;
  --info-text: #1d4ed8;
  --info-accent: #2563eb;
  --radius-xs: 4px;
  --ring-color: color-mix(in srgb, var(--primary) 14%, transparent);
  --ring-color-danger: color-mix(in srgb, var(--danger) 14%, transparent);
  --chrome-bg: var(--bg-gradient);

  /* ── Semantic tokens (added for tokenised framework css) ── */
  --chrome-flat: var(--primary);

  /* ── Semantic tokens (added for tokenised framework css) ── */
  --chrome-overlay: rgba(255,255,255,0.10);
  --chrome-border: rgba(255,255,255,0.08);
  --chrome-text-muted: rgba(255,255,255,0.55);

  /* ── Semantic tokens (added for tokenised framework css) ── */
  --public-header-bg: color-mix(in srgb, var(--surface) 90%, transparent);
  --public-header-text: var(--text-color);
  --public-header-text-strong: var(--text-color-dark);
  --public-header-border: var(--border);
}

html, body {
    font-family: var(--font-sans);
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }