/* ═══════════════════════════════════════════════════════════════════════
   Madplanen – Design tokens
   ───────────────────────────────────────────────────────────────────────
   Single source of truth for colour, type, radius, shadow and spacing.
   Everything else (site.css, *.razor.css) should consume these variables
   rather than repeating literal values.

   Rule of thumb: if you are about to type a hex code anywhere else,
   add or reuse a token here instead.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ──────────────────────────────────────────────────────────
       Madplanen is green. These three shades drive every brand surface:
       gradients run brand-dark → brand → brand-light.                    */
    --mp-brand-darkest: #0f172a; /* near-black navy, sidebar + hero top   */
    --mp-brand-dark: #1e3a2f; /* deep forest, sidebar mid              */
    --mp-brand: #22543d; /* primary brand green                   */
    --mp-brand-mid: #2f855a; /* button gradient end                   */
    --mp-brand-light: #38a169; /* accents, hero gradient tail           */
    --mp-brand-ink: #1e4835; /* pressed / hover state for brand       */

    /* ── Semantic ───────────────────────────────────────────────────── */
    --mp-success: #059669;
    --mp-success-light: #10b981;
    --mp-success-dark: #047857;
    --mp-warning: #d97706;
    --mp-warning-light: #f59e0b;
    --mp-warning-dark: #b45309;
    --mp-danger: #dc2626;
    --mp-danger-dark: #b91c1c;
    --mp-info: #0ea5e9;
    --mp-accent: #f59e0b; /* amber, used sparingly for highlights   */

    /* ── Neutrals ───────────────────────────────────────────────────── */
    --mp-white: #ffffff;
    --mp-grey-50: #f8fafc;
    --mp-grey-100: #f3f4f6;
    --mp-grey-200: #e5e7eb;
    --mp-grey-300: #d1d5db;
    --mp-grey-400: #9ca3af;
    --mp-grey-500: #6b7280;
    --mp-grey-600: #4b5563;
    --mp-grey-700: #374151;
    --mp-grey-800: #1e293b;
    --mp-grey-900: #1a1a1a;

    /* ── Surfaces & text ────────────────────────────────────────────── */
    --mp-bg: var(--mp-white);
    --mp-surface: var(--mp-grey-50);
    --mp-card: var(--mp-white);
    --mp-ink: var(--mp-grey-900);
    --mp-ink-soft: var(--mp-grey-800);
    --mp-muted: var(--mp-grey-500);
    --mp-border: var(--mp-grey-200);
    --mp-border-soft: #ececec;
    --mp-chip: #eef2ff;

    /* ── Typography ─────────────────────────────────────────────────────
       One stack for the whole product. The landing page previously used
       a different family to the app, which made the two feel unrelated.  */
    --mp-font-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ── Radius ─────────────────────────────────────────────────────── */
    --mp-radius-sm: .375rem;
    --mp-radius: .55rem;
    --mp-radius-md: .75rem;
    --mp-radius-lg: 1rem;
    --mp-radius-xl: 14px;
    --mp-radius-pill: 999px;

    /* ── Elevation ──────────────────────────────────────────────────── */
    --mp-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
    --mp-shadow-sm: 0 2px 8px rgba(15,23,42,.08);
    --mp-shadow: 0 6px 24px rgba(15,23,42,.08);
    --mp-shadow-md: 0 4px 14px rgba(15,23,42,.12);
    --mp-shadow-lg: 0 12px 32px rgba(15,23,42,.16);
    --mp-shadow-brand: 0 2px 8px rgba(34,84,61,.25);
    --mp-shadow-brand-hover: 0 4px 14px rgba(34,84,61,.35);

    /* ── Spacing ────────────────────────────────────────────────────── */
    --mp-space-xs: .25rem;
    --mp-space-sm: .5rem;
    --mp-space-md: .75rem;
    --mp-space-lg: 1rem;
    --mp-space-xl: 1.5rem;
    --mp-space-2xl: 2rem;

    /* ── Motion ─────────────────────────────────────────────────────── */
    --mp-transition: .18s ease;

    /* ── Layout ─────────────────────────────────────────────────────── */
    --mp-sidebar-width: 250px;
    --mp-tap-target: 44px; /* minimum comfortable touch target */

    /* ── Legacy aliases ─────────────────────────────────────────────────
       Older rules in site.css and RecipeViewer refer to these short names.
       They are mapped onto the tokens above so there is exactly one brand
       colour in the product. Prefer the --mp-* names in new code.        */
    --bg: var(--mp-bg);
    --card: var(--mp-card);
    --ink: var(--mp-ink);
    --muted: var(--mp-muted);
    --brand: var(--mp-brand);
    --brand-ink: var(--mp-brand-ink);
    --brand-light: var(--mp-brand-light);
    --brand-dark: var(--mp-brand-darkest);
    --accent: var(--mp-accent);
    --surface: var(--mp-surface);
    --chip: var(--mp-chip);
    --border: var(--mp-border-soft);
    --shadow: var(--mp-shadow);
    --radius: var(--mp-radius-xl);
}

/* Respect users who ask for less motion. The app leans on hover lifts and
   transitions fairly heavily, which can be uncomfortable for some people. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}