@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   1. MASTER 12 GLOBAL DESIGN TOKENS (:root)
   Single Source of Truth: frontend/global_color_typography_design_plan.md
   NOTE: Raw hex codes & font family names exist ONLY here inside :root.
   In Phase B, store_settings dynamically injects overrides into <head>.
   ========================================================================== */
:root {
    /* A. Brand & Surface Colors (80-15-5 Rule) */
    --bg-main: #FBF9F8;
    --bg-surface: #F4EFEA;
    --brand-primary: #5C2C3E;
    --brand-accent: #D4B5A9;
    --border-subtle: #E6DCD8;

    /* B. Text Colors */
    --text-primary: #2A1E22;
    --text-muted: #6E5A60;
    --text-light: #FBF9F8;

    /* C. State / Feedback Colors (Text, icons, dots & borders only) */
    --state-success: #3F7A4F;
    --state-error: #B42318;

    /* D. Typography Font Tokens */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================================================
   2. BASE STYLES, ACCESSIBILITY & MOTION RULES
   ========================================================================== */
@layer base {
    html {
        background-color: var(--bg-main);
        color: var(--text-primary);
        font-family: var(--font-body);
        line-height: 1.6;
        overflow-x: hidden;
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        background-color: var(--bg-main);
        color: var(--text-primary);
        font-family: var(--font-body);
        overflow-x: hidden;
        min-height: 100dvh;
    }

    h1, h2, h3, h4, .font-heading {
        font-family: var(--font-heading);
        line-height: 1.2;
    }

    /* Visible keyboard focus ring: 2px outline in --brand-primary, 2px offset */
    :focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }

    /* Respect device "reduce motion" setting */
    @media (prefers-reduced-motion: reduce) {
        *, ::before, ::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ==========================================================================
   3. STANDARD TYPOGRAPHY SCALE, BUTTONS, BADGES, FORMS & SHIMMER
   Strictly follows global_color_typography_design_plan.md &
   global_ui_components_and_content_standards.md
   ========================================================================== */
@layer components {
    /* --- Standard Containers & Section Spacing --- */
    .container-main,
    .container-boutique {
        @apply w-full max-w-container mx-auto px-[16px] md:px-[24px];
    }
    .container-checkout {
        @apply w-full max-w-checkout mx-auto px-[16px] md:px-[24px];
    }
    .container-reading {
        @apply w-full max-w-reading mx-auto px-[16px] md:px-[24px];
    }
    .section-spacing {
        @apply py-[40px] md:py-[52px] lg:py-[64px];
    }

    /* --- Standard Typography Scale Classes --- */
    .type-h1 {
        @apply font-heading font-bold text-[32px] lg:text-[48px] leading-[1.2] text-brand-primary;
    }
    .type-h2 {
        @apply font-heading font-semibold text-[24px] lg:text-[32px] leading-[1.2] text-brand-primary;
    }
    .type-pdp-title {
        @apply font-heading font-semibold text-[22px] lg:text-[28px] leading-[1.2] text-text-primary;
    }
    .type-h3 {
        @apply font-heading font-semibold text-[20px] lg:text-[22px] leading-[1.2] text-brand-primary;
    }
    .type-h4 {
        @apply font-heading font-semibold text-[18px] lg:text-[20px] leading-[1.2];
    }
    .type-logo {
        @apply font-heading font-bold text-[22px] lg:text-[28px] leading-[1.1] text-text-light;
    }
    .type-card-title {
        @apply font-body font-medium text-[14px] lg:text-[16px] leading-[1.4] text-text-primary;
    }
    .type-card-price {
        @apply font-body font-bold text-[15px] lg:text-[18px] leading-[1.3] text-text-primary;
    }
    .type-card-old-price {
        @apply font-body font-normal text-[12px] lg:text-[14px] leading-[1.3] text-text-muted line-through;
    }
    .type-pdp-price {
        @apply font-body font-bold text-[18px] lg:text-[22px] leading-[1.3] text-text-primary;
    }
    .type-pdp-old-price {
        @apply font-body font-normal text-[14px] lg:text-[16px] leading-[1.3] text-text-muted line-through;
    }
    .type-eyebrow,
    .type-overline {
        @apply font-body font-semibold text-[11px] lg:text-[12px] uppercase tracking-[1.5px] text-text-muted;
    }
    .type-body {
        @apply font-body font-normal text-[15px] lg:text-[16px] leading-[1.6] text-text-muted;
    }
    .type-meta {
        @apply font-body font-normal text-[12px] lg:text-[13px] leading-[1.5] text-text-muted;
    }

    /* --- Button System (Contrast Rule: --brand-accent bg ALWAYS uses --text-primary; flips to --brand-primary + --text-light on hover) --- */
    .btn-primary {
        @apply inline-flex items-center justify-center h-[48px] px-[24px] bg-brand-accent text-text-primary hover:bg-brand-primary hover:text-text-light active:bg-brand-primary active:text-text-light font-body font-semibold text-[13px] lg:text-[14px] uppercase tracking-[0.8px] transition-colors duration-200 select-none cursor-pointer;
    }
    .btn-primary-lg {
        @apply inline-flex items-center justify-center h-[52px] px-[28px] bg-brand-accent text-text-primary hover:bg-brand-primary hover:text-text-light active:bg-brand-primary active:text-text-light font-body font-semibold text-[13px] lg:text-[14px] uppercase tracking-[0.8px] transition-colors duration-200 select-none cursor-pointer;
    }
    .btn-secondary {
        @apply inline-flex items-center justify-center h-[48px] px-[24px] bg-bg-main border-[1.5px] border-brand-primary text-brand-primary hover:bg-bg-surface active:bg-bg-surface font-body font-semibold text-[13px] lg:text-[14px] uppercase tracking-[0.8px] transition-colors duration-200 select-none cursor-pointer;
    }
    .btn-compact-primary {
        @apply inline-flex items-center justify-center h-[44px] px-[16px] bg-brand-accent text-text-primary hover:bg-brand-primary hover:text-text-light active:bg-brand-primary active:text-text-light font-body font-semibold text-[13px] uppercase tracking-[0.8px] transition-colors duration-200 select-none cursor-pointer;
    }
    .btn-compact-secondary {
        @apply inline-flex items-center justify-center h-[44px] px-[16px] bg-bg-main border-[1.5px] border-brand-primary text-brand-primary hover:bg-bg-surface active:bg-bg-surface font-body font-semibold text-[13px] uppercase tracking-[0.8px] transition-colors duration-200 select-none cursor-pointer;
    }
    .btn-disabled {
        @apply inline-flex items-center justify-center h-[48px] px-[24px] bg-bg-surface border border-border-subtle text-text-muted font-body font-semibold text-[13px] lg:text-[14px] uppercase tracking-[0.8px] cursor-not-allowed select-none;
    }
    .btn-icon {
        @apply inline-flex items-center justify-center w-[44px] h-[44px] lg:w-[36px] lg:h-[36px] rounded-full bg-bg-surface text-text-primary hover:bg-brand-primary hover:text-text-light active:bg-brand-primary active:text-text-light border border-border-subtle transition-colors duration-200 cursor-pointer;
    }
    .link-brand {
        @apply inline-flex items-center gap-[6px] font-body font-semibold text-[14px] lg:text-[15px] text-brand-primary hover:underline decoration-brand-accent underline-offset-4 transition-colors duration-200;
    }

    /* --- Badge & Pill Standards --- */
    .badge-accent {
        @apply inline-flex items-center justify-center px-[8px] py-[3px] bg-brand-accent text-text-primary font-body font-semibold uppercase text-[11px] lg:text-[12px] tracking-[0.5px] leading-none;
    }
    .badge-soldout {
        @apply inline-flex items-center justify-center px-[8px] py-[3px] bg-bg-surface border border-border-subtle text-text-muted font-body font-semibold uppercase text-[11px] lg:text-[12px] tracking-[0.5px] leading-none;
    }
    .pill-active {
        @apply inline-flex items-center justify-center min-h-[40px] px-[16px] bg-brand-primary text-text-light border border-brand-primary font-body font-medium text-[13px] lg:text-[14px] whitespace-nowrap transition-colors duration-200;
    }
    .pill-inactive {
        @apply inline-flex items-center justify-center min-h-[40px] px-[16px] bg-bg-surface text-text-primary border border-border-subtle hover:border-brand-primary font-body font-medium text-[13px] lg:text-[14px] whitespace-nowrap transition-colors duration-200;
    }

    /* --- Form & Feedback Input States (Section 9 of global_ui_components_and_content_standards.md) --- */
    .form-label,
    .label-base {
        @apply block font-body font-medium text-[14px] text-text-primary mb-[6px];
    }
    .input-field,
    .input-base {
        @apply w-full h-[48px] px-[14px] bg-bg-main border border-border-subtle text-text-primary placeholder:text-text-muted font-body font-normal text-[16px] lg:text-[15px] focus:outline-none focus:border-[1.5px] focus:border-brand-primary disabled:bg-bg-surface disabled:text-text-muted transition-colors duration-200;
    }
    .textarea-field {
        @apply w-full p-[14px] bg-bg-main border border-border-subtle text-text-primary placeholder:text-text-muted font-body font-normal text-[16px] lg:text-[15px] focus:outline-none focus:border-[1.5px] focus:border-brand-primary disabled:bg-bg-surface disabled:text-text-muted transition-colors duration-200;
    }
    .input-error {
        @apply border-[1.5px] border-state-error focus:border-state-error;
    }
    .error-text {
        @apply mt-[4px] font-body text-[13px] text-state-error;
    }

    /* --- Toast & State Message Boxes (Tinted message boxes use --bg-main with 3px left border in state color) --- */
    .toast-box-success {
        @apply bg-bg-main border border-border-subtle border-l-[3px] border-l-state-success text-text-primary px-[16px] py-[12px];
    }
    .toast-box-error {
        @apply bg-bg-main border border-border-subtle border-l-[3px] border-l-state-error text-text-primary px-[16px] py-[12px];
    }

    /* --- Warm Shimmer Skeleton (--bg-surface base with moving --border-subtle / --bg-main wave; never grey) --- */
    .shimmer-warm {
        background-color: var(--bg-surface);
        background-image: linear-gradient(
            90deg,
            var(--bg-surface) 0%,
            var(--border-subtle) 45%,
            var(--bg-main) 55%,
            var(--bg-surface) 100%
        );
        background-size: 200% 100%;
        animation: aanginaWarmShimmer 1.6s ease-in-out infinite;
    }

    /* --- Overlay Backdrop (--text-primary at 60% opacity) --- */
    .overlay-backdrop {
        background-color: color-mix(in srgb, var(--text-primary) 60%, transparent);
    }
}

@keyframes aanginaWarmShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Hide scrollbars cleanly on horizontal touch sliders & switcher pill rows */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}