/* ──────────────────────────────────────────────────────────────────────────
   OpenDrawing — Design Tokens  (SINGLE SOURCE OF TRUTH)
   Load this file FIRST. It declares the layer order for the entire app.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Layer order ─────────────────────────────────────────────────────────── */
/* Declared once here; load order of other files doesn't matter.            */
@layer tokens, base, components, utilities;

/* ── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

@layer tokens {
  :root {
    /* ── Backgrounds ─────────────────────────────────────────── */
    --bg-base:    #0a0f1e;
    --bg-panel:   #0f1729;
    --bg-surface: #182135;
    --bg-hover:   #232e48;
    --bg-input:   #131b2d;

    /* ── Borders ─────────────────────────────────────────────── */
    --border:       #283044;
    --border-light: #344057;

    /* ── Text ────────────────────────────────────────────────── */
    --text-primary:   #e8eaed;
    --text-secondary: #a8b2c4;
    --text-muted:     #7a8299;

    /* ── Accent (OpenDrawing Blue) ───────────────────────────── */
    --accent:       #3b5bdb;
    --accent-hover: #2f4cc4;
    --accent-dim:   rgba(59, 91, 219, 0.15);

    /* ── Semantic colours ────────────────────────────────────── */
    --success:     #22c55e;
    --success-dim: rgba(34, 197,  94, 0.12);
    --warning:     #f59e0b;
    --warning-dim: rgba(245, 158,  11, 0.12);
    --danger:      #ef4444;
    --danger-dim:  rgba(239,  68,  68, 0.12);
    --info:        #38bdf8;
    --info-dim:    rgba( 56, 189, 248, 0.12);

    /* ── Typography ──────────────────────────────────────────── */
    --sans: 'Geist', system-ui, -apple-system, sans-serif;
    --mono: 'Geist Mono', monospace;

    --fs-xs:  11px;
    --fs-sm:  12px;
    --fs-md:  13px;
    --fs-lg:  15px;
    --fs-xl:  18px;
    --fs-2xl: 20px;
    --fs-3xl: 24px;

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

    /* ── Shape ───────────────────────────────────────────────── */
    --radius:    6px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.40);
    --shadow-lg: 0 12px 36px rgba(0,0,0,0.55);
    --shadow-xl: 0 32px 80px rgba(0,0,0,0.70);

    /* ── Overlays ────────────────────────────────────────────── */
    --overlay-bg:   rgba(0,0,0,0.65);
    --overlay-dark: rgba(10,15,30,0.88);

    /* ── Layout ──────────────────────────────────────────────── */
    --topbar-h:      52px;
    --rightpanel-w: 340px;
  }
}