/*!
 * 123D — Design Tokens (shared across catalog, product, dashboard, login)
 * --------------------------------------------------------------------
 * Single source of truth for brand colors, type, spacing, motion.
 * Aliased into surface-local prefixes (--fc-*, --fd-*) so existing
 * stylesheets keep working without rewrites.
 *
 * @package f-AR-nkenstein-central
 */

/* Brand fonts — Hebrew-first, with Latin fallback baked into the families */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&family=Heebo:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ── Brand ─────────────────────────────────────── */
    --farn-brand:           #C7522A;        /* terracotta — primary brand */
    --farn-brand-hover:     #A83F1D;
    --farn-brand-active:    #8B3216;
    --farn-brand-soft:      #FBEFE8;        /* tinted surface for badges, active filters */
    --farn-brand-soft-2:    #F6DDD0;
    --farn-brand-contrast:  #FFFFFF;

    /* Secondary accent for variety (links, info chips) */
    --farn-accent:          #2B6CB0;
    --farn-accent-soft:     #E6F0FA;

    /* Status — semantic, not decorative */
    --farn-success:         #16A34A;
    --farn-success-soft:    #DCFCE7;
    --farn-warning:         #D97706;
    --farn-warning-soft:    #FEF3C7;
    --farn-danger:          #DC2626;
    --farn-danger-soft:     #FEE2E2;
    --farn-info:            #2563EB;
    --farn-info-soft:       #DBEAFE;

    /* ── Surface system ────────────────────────────── */
    --farn-canvas:          #F7F6F2;        /* page background — warm off-white */
    --farn-surface:          #FFFFFF;        /* card background */
    --farn-surface-2:       #F3F2EE;        /* muted surface, hover row */
    --farn-surface-3:       #E9E7E0;        /* subtle dividers area */
    --farn-overlay:         rgba(20, 19, 15, .55);   /* modal backdrop */

    /* ── Ink (text) ────────────────────────────────── */
    --farn-ink:             #14130F;        /* primary text */
    --farn-ink-2:           #3A372F;        /* body */
    --farn-muted:           #5C584F;
    --farn-subtle:          #8A867C;
    --farn-disabled:        #B8B4A8;

    /* ── Borders ───────────────────────────────────── */
    --farn-border:          #E7E5DE;
    --farn-border-strong:   #D8D5CC;
    --farn-border-focus:    var(--farn-brand);

    /* ── Typography ────────────────────────────────── */
    --farn-font-sans:       'Assistant', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --farn-font-display:    'Heebo', 'Assistant', system-ui, sans-serif;
    --farn-font-mono:       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --farn-fs-xs:           12px;
    --farn-fs-sm:           13px;
    --farn-fs-base:         15px;
    --farn-fs-md:           16px;
    --farn-fs-lg:           18px;
    --farn-fs-xl:           22px;
    --farn-fs-2xl:          28px;
    --farn-fs-3xl:          36px;
    --farn-fs-4xl:          44px;

    --farn-lh-tight:        1.25;
    --farn-lh-normal:       1.55;
    --farn-lh-relaxed:      1.7;

    --farn-fw-regular:      400;
    --farn-fw-medium:       500;
    --farn-fw-semibold:     600;
    --farn-fw-bold:         700;
    --farn-fw-black:        800;

    --farn-tracking-tight:  -0.01em;
    --farn-tracking-normal: 0;
    --farn-tracking-wide:   0.04em;
    --farn-tracking-eyebrow: 0.14em;

    /* ── Spacing scale (4px base) ─────────────────── */
    --farn-space-1:         4px;
    --farn-space-2:         8px;
    --farn-space-3:         12px;
    --farn-space-4:         16px;
    --farn-space-5:         20px;
    --farn-space-6:         24px;
    --farn-space-8:         32px;
    --farn-space-10:        40px;
    --farn-space-12:        48px;
    --farn-space-16:        64px;

    /* ── Radii ─────────────────────────────────────── */
    --farn-radius-xs:       6px;
    --farn-radius-sm:       10px;
    --farn-radius-md:       14px;
    --farn-radius-lg:       18px;
    --farn-radius-xl:       24px;
    --farn-radius-pill:     999px;

    /* ── Shadows — warm-tinted, low key ───────────── */
    --farn-shadow-xs:       0 1px 2px rgba(20, 19, 15, .04);
    --farn-shadow-sm:       0 1px 2px rgba(20, 19, 15, .04), 0 2px 6px rgba(20, 19, 15, .04);
    --farn-shadow-md:       0 2px 4px rgba(20, 19, 15, .04), 0 8px 24px rgba(20, 19, 15, .08);
    --farn-shadow-lg:       0 4px 8px rgba(20, 19, 15, .06), 0 24px 56px rgba(20, 19, 15, .12);
    --farn-shadow-focus:    0 0 0 3px rgba(199, 82, 42, .22);

    /* ── Motion ────────────────────────────────────── */
    --farn-ease:            cubic-bezier(.22, .61, .36, 1);
    --farn-ease-out:        cubic-bezier(.16, 1, .3, 1);
    --farn-dur-fast:        .15s;
    --farn-dur:             .22s;
    --farn-dur-slow:        .35s;
    --farn-transition:      var(--farn-dur) var(--farn-ease);

    /* ── Layout ────────────────────────────────────── */
    --farn-container:       1280px;
    --farn-container-wide:  1400px;
    --farn-header-offset:   72px;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
    :root {
        --farn-dur-fast: .01s;
        --farn-dur:      .01s;
        --farn-dur-slow: .01s;
    }
}

/* ── Aliases for catalog stylesheet (--fc-*) ─────────────────────────
 * Keeps farn-catalog.css working with the new tokens without edits.
 * If you ever inline-edit catalog rules, prefer the --farn-* tokens.
 * ------------------------------------------------------------------ */
:root {
    --fc-primary:          var(--farn-ink);
    --fc-accent:           var(--farn-brand);
    --fc-accent-hover:     var(--farn-brand-hover);
    --fc-accent-soft:      var(--farn-brand-soft);
    --fc-surface:          var(--farn-surface);
    --fc-surface-2:        var(--farn-surface-2);
    --fc-canvas:           var(--farn-canvas);
    --fc-border:           var(--farn-border);
    --fc-border-strong:    var(--farn-border-strong);
    --fc-text:             var(--farn-ink);
    --fc-muted:            var(--farn-muted);
    --fc-subtle:           var(--farn-subtle);
    --fc-price:            var(--farn-ink);
    --fc-sale:             var(--farn-brand);
    --fc-badge-bg:         var(--farn-brand-soft);
    --fc-badge-text:       var(--farn-brand-hover);
    --fc-ar-btn:           var(--farn-brand);
    --fc-ar-btn-hover:     var(--farn-brand-hover);
    --fc-whatsapp:         #25D366;
    --fc-call:             #0EA5E9;
    --fc-shadow:           var(--farn-shadow-sm);
    --fc-shadow-hover:     var(--farn-shadow-lg);
    --fc-radius:           var(--farn-radius-md);
    --fc-radius-sm:        var(--farn-radius-sm);
    --fc-transition:       var(--farn-transition);
}