/* Visit Dock Design Tokens — Brand Identity System
 *
 * Aligned with the public landing page (visitdock.pt) so the in-app
 * experience and the marketing site share the same visual language.
 * Tokens are additive: every old variable still resolves to the same
 * value (or close enough), and new variables expose the modern palette
 * for components that opt in via the refresh layer in main.css.
 */

/* Inter family — full weight range used across the app and landing. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* ─── Brand ─────────────────────────────────────────────────────── */
    --color-brand: #1F3A5F;        /* Dock Blue — anchor */
    --color-brand-dark: #0F1F33;   /* Dock Dark — emphasis */
    --color-brand-soft: #eef2f9;   /* Subtle wash for chips, hover */

    /* Pop accent — bright blue used in hero gradients & primary CTAs.
       Matches the landing's --c-pop. */
    --color-pop: #2563eb;
    --color-pop-hover: #1d4ed8;
    --color-pop-soft: rgba(37, 99, 235, 0.10);
    --color-pop-ring: rgba(37, 99, 235, 0.18);

    /* ─── Neutrals ──────────────────────────────────────────────────── */
    --color-bg: #f7f8fb;            /* App background (was #E6E8EB) */
    --color-bg-soft: #f1f3f7;       /* Slightly stronger surface tint */
    --color-surface: #FFFFFF;       /* Cards, modals, panels */
    --color-surface-soft: #f4f5f7;  /* Inset / nested panels */
    --color-text: #0f172a;          /* Primary text (was #2E3440) */
    --color-text-muted: #475569;    /* Secondary text (was #667085) */
    --color-text-subtle: #64748b;   /* Hint / placeholder / metadata */
    --color-border: #e2e8f0;        /* Dividers, outlines (was #D0D5DD) */
    --color-border-soft: rgba(15, 23, 42, 0.06);

    /* ─── State / Feedback ──────────────────────────────────────────── */
    --color-accent: #F59E0B;        /* Offline, pending, draft, warnings */
    --color-accent-soft: rgba(245, 158, 11, 0.12);
    --color-success: #22C55E;       /* Completed, synced */
    --color-success-soft: rgba(34, 197, 94, 0.14);
    --color-danger: #EF4444;        /* Errors, destructive */
    --color-danger-soft: rgba(239, 68, 68, 0.10);
    --color-info: #3b82f6;
    --color-info-soft: rgba(59, 130, 246, 0.10);

    /* ─── Gradients (decorative) ────────────────────────────────────── */
    --gradient-brand: linear-gradient(135deg, #1F3A5F 0%, #2563eb 100%);
    --gradient-pop:   linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-success: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --gradient-warm:  linear-gradient(135deg, #ea580c 0%, #f97316 100%);

    /* ─── Typography ────────────────────────────────────────────────── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-base: 1.5;
    --line-height-tight: 1.2;

    /* ─── Spacing ───────────────────────────────────────────────────── */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ─── Border radius ─────────────────────────────────────────────── */
    --radius-sm: 6px;     /* small chips, inputs hint */
    --radius-md: 10px;    /* default for inputs, small cards */
    --radius-lg: 14px;    /* main cards (was 12px) */
    --radius-xl: 20px;    /* hero panels, big surfaces */
    --radius-pill: 999px; /* badges & chips */

    /* ─── Touch targets ─────────────────────────────────────────────── */
    --touch-target-min: 44px;

    /* ─── Shadows (layered, soft) ───────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 40px 80px rgba(15, 23, 42, 0.18), 0 16px 32px rgba(15, 23, 42, 0.08);
    --shadow-pop: 0 4px 14px rgba(37, 99, 235, 0.30);
    --shadow-pop-strong: 0 8px 20px rgba(37, 99, 235, 0.38);

    /* ─── Transitions ───────────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}