/* ==========================================================================
   Design Tokens — Nawa Home
   Brand Design System v3.0
   ========================================================================== */

:root {
    /* Brand */
    --color-brand-primary: #2b2b2b;
    --color-brand-secondary: #e8d8c3;
    --color-brand-accent: #c6a15b;

    /* Background — page canvas */
    --color-background: #faf7f2;

    /* Surface — component/panel backgrounds */
    --color-surface: #ffffff;
    --color-surface-alt: #f5f1ea;
    --color-overlay: rgba(43, 43, 43, 0.55);

    /* Text */
    --color-text-primary: #2b2b2b;
    --color-text-secondary: #5f5a54;
    --color-text-muted: #8a847d;
    --color-text-on-primary: #ffffff;

    /* Border */
    --color-border-default: #ddd4c8;
    --color-border-strong: #c9bca9;

    /* State — derived from Brand per approved rule (hover: darken ~8%, active: darken ~12%); disabled uses opacity, not a new color */
    --color-state-primary-hover: #171717;
    --color-state-primary-active: #0c0c0c;
    --state-disabled-opacity: 0.5;

    /* Focus */
    --color-focus: #c6a15b;

    /* Feedback — declared for future use; no component consumes these yet */
    --color-feedback-success: #3e7c59;
    --color-feedback-warning: #c48a1a;
    --color-feedback-error: #b5483a;
    --color-feedback-info: #5a7fa3;

    /* Typography — family stacks only; no production font files loaded yet.
       Self-hosted fonts can be added later via @font-face with zero component changes,
       since every component already consumes these variables rather than a font name. */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-arabic: 'Noto Sans Arabic', Tahoma, sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-3xl: 2.5rem;

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

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(43, 43, 43, 0.06);
    --shadow-md: 0 4px 16px rgba(43, 43, 43, 0.1);

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Z-index scale */
    --z-header: 100;
    --z-overlay: 200;
    --z-mobile-nav: 300;

    /* Layout */
    --header-height: 4.5rem;
    --announcement-height: 2.25rem;
    --container-max: 80rem;
    --icon-size: 1.5rem;
    --category-card-height: 20rem;
}