/* ============================================================
   SOWHAT DESIGN SYSTEM
   Centralized Token Repository for Web & Mobile
   ============================================================ */

:root {
    /* ─── 🎨 BRAND PALETTES ─── */

    /* Heritage Brand (Main Platform & SaaS Admin) */
    --heritage-forest: #40634D;
    --heritage-cream: #F1EFE2;
    --heritage-light: rgba(64, 99, 77, 0.08);
    --heritage-hover: #324e3c;

    /* Apple Brand (DevDen) */
    --apple-black: #1D1C1D;
    --apple-white: #ffffff;
    --apple-silver: #f5f5f7;
    --apple-gray: #868e96;

    /* ─── ⚪️ NEUTRALS ─── */
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* ─── 🖋 TYPOGRAPHY ─── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-outfit: 'Outfit', sans-serif;
    --font-serif: 'Linux Libertine', 'Georgia', serif;

    /* ─── 🧱 UI TOKENS (Semantic - Shared) ─── */
    --text-main: #1D1C1D;
    --text-dim: #616061;
    --text-inverse: var(--white);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.15);

    /* States */
    --danger: #be123c;
    --success: #15803d;
    --warning: #92400e;
    --info: #0369a1;

    /* ─── ✨ EFFECTS ─── */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.3);
    --blur: blur(10px);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ─── 🏃 ANIMATIONS ─── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s var(--ease);
    --transition-med: 0.3s var(--ease);

    /* ─── 🏛 LEGACY & SEMANTIC ALIASES ─── */

    /* Default to Heritage */
    --primary: var(--heritage-forest);
    --primary-accent: var(--heritage-cream);
    --primary-hover: var(--heritage-hover);
    --bg-workspace: var(--white);
    --bg-sidebar: var(--heritage-cream);
    --bg-rail: var(--heritage-forest);

    --border: var(--border-subtle);
    --success: #15803d;
    --danger: #be123c;
    --warning: #92400e;
    --info: #0369a1;

    /* Core Style Mapping */
    --primary-color: var(--primary);
    --bg-color: var(--white);
    --text-color: var(--text-main);
    --font-heading: var(--font-serif);
    --font-body: var(--font-sans);
    --font: var(--font-sans);
    --transition: var(--transition-fast);

    /* DevDen Specialization Tokens */
    --dd-bg: var(--apple-white);
    --dd-ink: var(--apple-black);
    --dd-surface: var(--apple-silver);
}

/* Base resets & utility integration helpers */
.ds-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
}

.ds-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.ds-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}