/*
 * SITE AND SHOP CSS TOKENS
 * Shared site foundations live in --site-*.
 * Reusable catalog, cart and availability styling lives in --shop-*.
 * Component-only layout and animation properties remain locally scoped.
 */

/* === Site theme === */
:root {
    --site-brand-primary: #1b1b1b;
    --site-brand-primary-strong: #292929;
    --site-brand-primary-deep: #101010;
    --site-brand-contrast: #fff;
    --site-brand-divider: rgba(255, 255, 255, 0.65);
    --site-accent: #f47b20;
    --site-accent-hover: #d86612;

    --site-page-bg: #f7f7f7;
    --site-surface: #fff;
    --site-surface-raised: #f0f0f0;
    --site-surface-soft: #f7f7f7;
    --site-surface-inset: #fafafa;
    --site-text-strong: #171717;
    --site-text: #333333;
    --site-text-muted: #5b5b5b;
    --site-text-subtle: #777777;
    --site-border: #e1e1e1;
    --site-divider: #e5e5e5;
    --site-success: #287a46;
    --site-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    --site-field-surface: var(--site-surface-inset);
    --site-field-text: var(--site-text-strong);
    --site-field-placeholder: var(--site-text-subtle);
    --site-field-border: var(--site-border);

    --site-action: var(--site-brand-primary);
    --site-action-hover: var(--site-brand-primary-strong);
    --site-action-contrast: #fff;
    --site-action-rgb: 27, 27, 27;
    --site-action-soft: rgba(0, 0, 0, 0.1);
    --site-action-gradient: linear-gradient(135deg, var(--site-brand-primary), var(--site-brand-primary-strong));
    --site-action-gradient-hover: linear-gradient(135deg, var(--site-brand-primary-strong), var(--site-brand-primary-deep));
    --site-focus-ring: rgba(0, 0, 0, 0.16);
}

html.dark {
    --site-page-bg: #111111;
    --site-surface: #1b1b1b;
    --site-surface-raised: #292929;
    --site-surface-soft: #252525;
    --site-surface-inset: #151515;
    --site-text-strong: #f1f5f9;
    --site-text: #d4d4d4;
    --site-text-muted: #a8a8a8;
    --site-text-subtle: #909090;
    --site-border: #414141;
    --site-divider: #333333;
    --site-success: #6ee7b7;
    --site-card-shadow: none;

    --site-action: var(--site-accent);
    --site-action-hover: var(--site-accent-hover);
    --site-action-contrast: #171717;
    --site-action-rgb: 244, 123, 32;
    --site-action-soft: rgba(244, 123, 32, 0.16);
    --site-action-gradient: linear-gradient(135deg, var(--site-accent), var(--site-accent-hover));
    --site-action-gradient-hover: linear-gradient(135deg, var(--site-accent-hover), #c6530f);
    --site-focus-ring: rgba(244, 123, 32, 0.28);
}

/* === Homepage sections === */
:root {
    --site-home-banner-panel: rgba(17, 17, 17, 0.45);
    --site-home-banner-shade: rgba(0, 0, 0, 0.35);
    --site-home-intro-heading: #2a2a2a;
    --site-home-intro-text: #474747;
    --site-home-delivery-start: #f58220;
    --site-home-delivery-end: #b1611c;
    --site-home-branch-surface: #f3efe9;
    --site-home-branch-text: #111111;
    --site-home-category-surface: #eeeeee;
}

html.dark {
    --site-home-intro-heading: var(--site-text-strong);
    --site-home-intro-text: var(--site-text);
    --site-home-branch-surface: var(--site-surface-soft);
    --site-home-branch-text: var(--site-text-strong);
}

/* === Shop theme === */
:root {
    --shop-cart-width: 14rem;
    --shop-cart-icon-start: 1.4rem;
    --shop-cart-icon-travel: 4.5rem;
    --shop-cart-background: #f47b20;
    --shop-cart-foreground: #171717;
    --shop-cart-shadow: rgba(0, 0, 0, 0.22);
    --shop-cart-success: #10b981;

    --shop-stock-in-bg: #217800;
    --shop-stock-in-text: #fff;
    --shop-stock-order-bg: #353535;
    --shop-stock-order-text: #fff;
    --shop-stock-unavailable-bg: #ffe1e1;
    --shop-stock-unavailable-text: #a01616;

    --shop-card-heading: var(--site-text-strong);
    --shop-card-text: var(--site-text);
    --shop-card-muted: var(--site-text-muted);
    --shop-card-border: var(--site-border);
    --shop-card-control-bg: var(--site-surface-inset);
    --shop-carousel-arrow: var(--site-action);
}

html.dark {
    --shop-carousel-arrow: var(--site-text-strong);
}

.filters-products-layout .products-grid .cart-button:not(.cart-button--prominent) {
    --shop-cart-width: 14rem;
    --shop-cart-icon-start: 1.2rem;
    --shop-cart-icon-travel: 4.4rem;
}

:is(#demo-favourites, .product-list-island .prod-list) .cart-button:not(.cart-button--prominent) {
    --shop-cart-width: 100%;
    --shop-cart-foreground: #171717;
    --shop-cart-icon-start: calc(50% - 55px);
    --shop-cart-icon-travel: 40px;
}

.cart-button--prominent {
    --shop-cart-width: 100%;
    --shop-cart-foreground: #171717;
    --shop-cart-icon-start: calc(50% - 58px);
    --shop-cart-icon-travel: 44px;
}

.featured-products .owl-carousel .owl-nav button:hover:not(.disabled) {
    --shop-carousel-arrow: var(--site-accent);
}

/* === Shared buttons === */
:root {
    --site-button-background: linear-gradient(135deg, var(--site-accent) 0%, var(--site-accent-hover) 100%);
    --site-button-hover-background: linear-gradient(135deg, #ff9b54 0%, var(--site-accent) 100%);
    --site-button-color: #171717;
    --site-button-shadow: 0 4px 20px rgba(244, 123, 32, 0.22);
    --site-button-hover-shadow: 0 8px 26px rgba(244, 123, 32, 0.32);
    --site-button-radius: 12px;
    --site-button-padding: 15px 32px;
    --site-button-focus-color: var(--site-accent);
}

html:not(.dark) .contact-submit {
    --site-button-background: var(--site-action-gradient);
    --site-button-hover-background: var(--site-action-gradient-hover);
    --site-button-color: var(--site-action-contrast);
    --site-button-shadow: 0 4px 20px rgba(var(--site-action-rgb), 0.28);
    --site-button-hover-shadow: 0 8px 26px rgba(var(--site-action-rgb), 0.36);
}

/* === Reusable site and shop component colours === */
:root {
    --site-brand-secondary: #383838;
    --site-brand-muted: rgba(0, 0, 0, 0.66);
    --site-accent-strong: #ff9b54;
    --site-accent-deep: #c6530f;
    --site-accent-emphasis: #963a06;
    --site-surface-tinted: #fff2e8;
    --site-danger: #ef4444;

    --site-social-icon: #1b1b1b;
    --site-social-facebook: #383838;
    --site-social-twitter: #383838;

    --site-auth-backdrop-mid: #fff2e8;
    --site-auth-backdrop-end: #ffe3cf;
    --site-auth-danger-text: #f8a5b0;
    --site-auth-success-text: #8fd9a0;

    --site-theme-toggle-text: #ccc;
    --site-theme-toggle-border: #444;
    --site-theme-toggle-background: #2a2a2a;
    --site-theme-toggle-light-text: #333;
    --site-theme-toggle-light-border: #f47b20;
    --site-theme-toggle-track-end: #dc6614;

    --site-brands-background: #f0f0f0;
    --site-brands-divider: #1b1b1b;
    --site-brands-banner: #383838;
    --site-brands-arrow: #1b1b1b;

    --site-surface-deep: #1b1b1b;
    --shop-card-surface-dark: #1b1b1b;
    --shop-card-outline: #dedede;
    --shop-carousel-border: #d0d0d0;
    --shop-carousel-surface-end: #f0f0f0;
    --shop-carousel-hover-start: #fff2e8;
    --shop-carousel-hover-end: #ffeadb;
    --shop-carousel-hover-border: #d86612;
    --shop-carousel-dark-start: #242424;
    --shop-carousel-dark-end: #141414;
}

/* === Demo-only effects === */
.promo-card .promo-icon-glow {
    --mega-glow-near: rgba(244, 123, 32, 0.55);
    --mega-glow-far: rgba(244, 123, 32, 0.22);
}

/* === Authentication layout and animation === */
.auth-shell {
    --c-bg: transparent;
    --c-surface: var(--site-surface);
    --c-border: rgba(0, 0, 0, 0.12);
    --c-text: var(--site-brand-primary);
    --c-muted: rgba(0, 0, 0, 0.55);
    --c-input-bg: var(--site-surface);
    --c-input-border: rgba(0, 0, 0, 0.18);
    --c-glow-primary: rgba(0, 0, 0, 0.18);
    --c-glow-accent: rgba(244, 123, 32, 0.35);
    --ease-main: cubic-bezier(0.77, 0, 0.18, 1);
    --dur-switch: 900ms;
    --dur-field: 600ms;
    --container-w: 1520px;
    --container-h: 600px;
    --panel-w: 50%;
    --r-container: 24px;
    --r-input: 14px;
    --r-btn: 14px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 27px;
    --space-lg: 43px;
    --space-xl: 60px;
}

html.dark .auth-shell {
    --c-surface: var(--site-surface);
    --c-border: var(--site-border);
    --c-text: var(--site-text-strong);
    --c-muted: #a0a0a0;
    --c-input-bg: var(--site-surface-inset);
    --c-input-border: var(--site-border);
    --c-glow-primary: rgba(0, 0, 0, 0.55);
    --c-glow-accent: rgba(244, 123, 32, 0.22);
}

.auth-shell .field--stagger {
    --stagger-base: calc(var(--dur-switch) * 0.42);
    --stagger-step: 55ms;
}

@media (max-width: 1180px) {
    .auth-shell {
        --container-w: min(94vw, 1100px);
    }
}

@media (max-width: 980px) {
    .auth-shell {
        --container-w: 100%;
        --container-h: auto;
        --panel-w: 100%;
        --mobile-overlay-h: 210px;
        --mobile-form-h: 580px;
        --space-xl: 30px;
        --space-lg: 22px;
        --space-md: 18px;
        --r-container: 18px;
    }

    .auth-shell .auth-container.active:not(.forgot) {
        --mobile-overlay-h: 460px;
    }
}

@media (max-width: 560px) {
    .auth-shell {
        --mobile-overlay-h: 190px;
        --mobile-form-h: 560px;
        --space-xl: 24px;
        --space-lg: 18px;
        --space-md: 16px;
        --r-input: 12px;
        --r-btn: 12px;
    }
}

/* === resources/core/views/accounts/layouts/accounts.blade.php === */
:root {
    --acc-bg: #f7f7f7;
    --acc-card: #ffffff;
    --acc-card-soft: #fafafa;
    --acc-hover: #f7f7f7;
    --acc-input: #ffffff;
    --acc-panel-header: #fafafa;
    --acc-tab-track: #f1f1f1;
    --acc-chip: #f3f4f6;
    --acc-card-gradient-2: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    --acc-info-gradient: linear-gradient(135deg, #f2f2f2, #fafafa);
    --acc-heading: #111827;
    --acc-title: #1f2937;
    --acc-text: #374151;
    --acc-text-2: #4b5563;
    --acc-muted: #6b7280;
    --acc-faint: #9ca3af;
    --acc-icon: #a0a0a0;
    --acc-placeholder: rgba(0,0,0,0.45);
    --acc-border: #e5e7eb;
    --acc-border-soft: #edf1f5;
    --acc-border-soft-2: #eef2f7;
    --acc-border-faint: #eef1f4;
    --acc-border-input: #dbe2ea;
    --acc-border-input-2: #dbe3ec;
    --acc-border-strong: #d1d5db;
    --acc-neutral: #3c4858;
    --acc-neutral-soft: rgba(60,72,88,0.08);
    --acc-neutral-gradient: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    --acc-neutral-gradient-hover: linear-gradient(135deg, #333333 0%, #1e1e1e 100%);
    --acc-danger: #dc2626;
    --acc-danger-hover: #b91c1c;
    --acc-danger-text: #b91c1c;
    --acc-danger-soft: rgba(239,68,68,0.12);
    --acc-danger-soft-bg: #fef2f2;
    --acc-danger-border: #fee2e2;
    --acc-danger-gradient: linear-gradient(135deg, #dc2626, #b91c1c);
    --acc-success: #059669;
    --acc-success-soft: rgba(16,185,129,0.12);
    --acc-success-soft-bg: #ecfdf5;
    --acc-success-text: #047857;
    --acc-warning: #e67a00;
    --acc-warning-dark: #c96900;
    --acc-warning-text: #a95400;
    --acc-warning-soft: rgba(230,122,0,0.12);
    --acc-warning-soft-bg: #fff5e8;
    --acc-warning-border: #ffd0a0;
    --acc-accent-primary: #383838;
    --acc-accent-primary-soft: #f0f1f2;
    --acc-accent-secondary: #f47b20;
    --acc-accent-secondary-soft: rgba(244,123,32,0.12);
}

html.dark {
    --acc-bg: #111111;
    --acc-card: #1f1f1f;
    --acc-card-soft: #262626;
    --acc-hover: #303030;
    --acc-input: #1b1b1b;
    --acc-panel-header: #242424;
    --acc-tab-track: #242424;
    --acc-chip: #333333;
    --acc-card-gradient-2: linear-gradient(135deg, #1e1e1e 0%, #242424 100%);
    --acc-info-gradient: linear-gradient(135deg, #1e1e1e, #242424);
    --acc-heading: #e5e5e5;
    --acc-title: #e5e5e5;
    --acc-text: #d0d0d0;
    --acc-text-2: #d0d0d0;
    --acc-muted: #a0a0a0;
    --acc-faint: #777777;
    --acc-icon: #777777;
    --acc-placeholder: rgba(226,232,240,0.45);
    --acc-border: #333333;
    --acc-border-soft: #363636;
    --acc-border-soft-2: #303030;
    --acc-border-faint: #303030;
    --acc-border-input: #444444;
    --acc-border-input-2: #444444;
    --acc-border-strong: #505050;
    --acc-neutral: #333333;
    --acc-neutral-soft: rgba(160,160,160,0.14);
    --acc-neutral-gradient: linear-gradient(135deg, #333333 0%, #1e1e1e 100%);
    --acc-neutral-gradient-hover: linear-gradient(135deg, #505050 0%, #333333 100%);
    --acc-danger: #ef4444;
    --acc-danger-hover: #b91c1c;
    --acc-danger-text: #fca5a5;
    --acc-danger-soft: rgba(239,68,68,0.18);
    --acc-danger-soft-bg: rgba(127,29,29,0.38);
    --acc-danger-border: rgba(239,68,68,0.32);
    --acc-danger-gradient: linear-gradient(135deg, #b91c1c, #7f1d1d);
    --acc-success: #34d399;
    --acc-success-soft: rgba(16,185,129,0.18);
    --acc-success-soft-bg: rgba(6,95,70,0.35);
    --acc-success-text: #6ee7b7;
    --acc-warning: #ff9e2e;
    --acc-warning-dark: #ff8900;
    --acc-warning-text: #ffc078;
    --acc-warning-soft: rgba(230,122,0,0.18);
    --acc-warning-soft-bg: rgba(154,73,0,0.35);
    --acc-warning-border: rgba(255,137,0,0.35);
    --acc-accent-primary: #ffb16e;
    --acc-accent-primary-soft: rgba(244,123,32,0.20);
    --acc-accent-secondary: #ff9b54;
    --acc-accent-secondary-soft: rgba(244,123,32,0.20);
}