/* ==========================================
   AnnotateShot Design Tokens
   Source: approved Anthropic design handoff, 2026-05-28
   https://api.anthropic.com/v1/design/h/YbtMVnj-YNLXEwhoROLNHQ
   ========================================== */

:root {
    /* ---------- Color tokens (Light) ---------- */
    --background: #ffffff;
    --foreground: #0f172a;        /* slate-900 */
    --card: #ffffff;
    --card-foreground: #0f172a;

    /* Brand */
    --primary: #3b82f6;           /* blue-500 */
    --primary-hover: #2563eb;     /* blue-600 */
    --primary-foreground: #ffffff;
    --success-color: #22c55e;     /* green-500 */
    --destructive: #ef4444;       /* red-500 */
    --destructive-foreground: #ffffff;
    --warning: #f59e0b;           /* amber-500 */

    --secondary: #f1f5f9;         /* slate-100 */
    --secondary-foreground: #0f172a;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;  /* slate-500 */
    --accent: #f1f5f9;
    --accent-foreground: #0f172a;
    --border: #e2e8f0;            /* slate-200 */
    --input: #e2e8f0;
    --ring: #3b82f6;

    /* Sidebar */
    --sidebar-background: var(--card);
    --sidebar-foreground: var(--card-foreground);
    --sidebar-border: var(--border);

    /* Annotation palette */
    --annot-red: #FF0000;
    --annot-orange: #FF8000;
    --annot-green: #00FF00;
    --annot-blue: #0000FF;

    /* ---------- Radii ---------- */
    --radius: 0.5rem;             /* 8px — buttons, inputs, cards, canvas */
    --radius-sm: 0.25rem;         /* 4px — chips, badges, status pills */
    --radius-lg: 0.75rem;         /* 12px — modals, mobile panels */
    --radius-xl: 1rem;            /* 16px — large cards / panels */

    /* ---------- Spacing ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* ---------- Layout ---------- */
    --editor-toolbar-height: 60px;
    --sidebar-width: 280px;
    --layer-sidebar-width: 280px;
    --label-width: 120px;

    /* ---------- Elevation ---------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.35);
    --shadow-cta: 0 2px 6px rgba(59, 130, 246, 0.3);
    --shadow-cta-hover: 0 3px 10px rgba(59, 130, 246, 0.4);
    --focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.1);

    /* ---------- Typography ---------- */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono: 'SFMono-Regular', Consolas, Menlo, Monaco, 'Liberation Mono', 'Courier New', monospace;
    --font-korean: 'Pretendard', 'Inter', system-ui, sans-serif;

    --text-xs: 0.72rem;     /* hints, captions       (~11.5px) */
    --text-sm: 0.8rem;      /* secondary labels      (~12.8px) */
    --text-base: 0.875rem;  /* default UI text       (~14px)   */
    --text-md: 1rem;        /* layer sidebar title   (16px)    */
    --text-lg: 1.125rem;    /* top-bar h2, logo text (18px)    */
    --text-xl: 1.25rem;     /* mobile logo, icons    (20px)    */

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

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
}

/* ---------- Dark theme ---------- */
.dark,
[data-theme='dark'] {
    --background: #0f172a;
    --foreground: #f8fafc;
    --card: #1e293b;
    --card-foreground: #f8fafc;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-foreground: #ffffff;
    --secondary: #334155;
    --secondary-foreground: #f8fafc;
    --muted: #334155;
    --muted-foreground: #94a3b8;
    --accent: #334155;
    --accent-foreground: #f8fafc;
    --border: #334155;
    --input: #334155;
    --ring: #3b82f6;
    --success-color: #22c55e;
    --destructive: #ef4444;
    --destructive-foreground: #ffffff;
    --warning: #f59e0b;
}