/*
Theme Name: Shahab
Theme URI: https://example.com/shahab
Author: Shahab
Author URI: https://example.com
Description: A clean, optimized WordPress theme with component-based architecture.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shahab
Tags: custom-logo, custom-colors, full-width-template, blog
*/

/* =============================================================
   ⚠️  PREFIX NOTICE — READ THIS FIRST
   -------------------------------------------------------------
   The single source of truth for the theme prefix lives in
   functions.php → `Theme::PREFIX` (currently "shahab").

   ALL prefixed class names (`.shahab-*`) are generated dynamically
   in `enqueue.php` → `Theme::dynamic_css()` from `Theme::PREFIX`
   and injected via `wp_add_inline_style()` — do NOT hardcode them
   here. This file only contains:
   - `:root` design tokens (no prefix needed)
   - Base reset & global element styles (no prefix needed)

   When you change `Theme::PREFIX`, the dynamic CSS and all PHP
   handles/IDs/settings update automatically.
   ============================================================= */

/* =============================================================
   ROOT DESIGN TOKENS — ALL colours/fonts come from here only
   ============================================================= */
:root {
    /* --- Typography --- */
    --font-family-base:      Inter, sans-serif;
    --font-family-heading:   Inter, sans-serif;
    --font-family-serif:     Inter, sans-serif;

    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    --font-size-xs:          12px;
    --font-size-sm:          14px;
    --font-size-base:        16px;
    --font-size-md:          18px;
    --font-size-lg:          20px;
    --font-size-xl:          22px;
    --font-size-2xl:         24px;
    --font-size-3xl:         28px;   /* heading default */
    --font-size-4xl:         32px;
    --font-size-5xl:         40px;
    --font-size-6xl:         48px;

    --line-height-tight:     1.2;
    --line-height-heading:   36px;   /* matches spec: 28px / 36px */
    --line-height-base:      1.6;
    --line-height-relaxed:   1.8;

    /* --- Colours (palette: white, green, light skin, mustard) --- */
    --color-primary:         rgb(48, 87, 36);    /* brand green */
    --color-primary-light:   rgb(67, 120, 50);
    --color-primary-dark:    rgb(32, 60, 24);
    --color-primary-muted:   rgba(48, 87, 36, 0.1);

    --color-secondary:       rgb(245, 245, 240);
    --color-accent:          rgb(255, 193, 7);   /* mustard */

    --color-text:            rgb(30, 30, 30);
    --color-text-muted:      rgb(100, 100, 100);
    --color-text-light:      rgb(160, 160, 160);
    --color-text-inverse:    rgb(255, 255, 255);

    --color-bg:              rgb(255, 255, 255);
    --color-bg-alt:          rgb(248, 249, 246);
    --color-bg-dark:         rgb(20, 30, 16);
    --color-bg-cream:        rgb(249, 248, 245);   /* f9f8f5 */
    --color-bg-warm:         rgb(247, 246, 242);   /* f7f6f2 */
    --color-bg-soft:         rgb(248, 248, 244);   /* f8f8f4 */
    --color-bg-muted:        rgb(245, 244, 240);   /* f5f4f0 */
    --color-bg-filter:       rgb(240, 238, 232);   /* f0eee8 */

    /* Brand accent — mapped to the green palette (no red / burgundy) */
    --color-brand-dark:      rgb(32, 60, 24);      /* primary-dark */
    --color-brand:           rgb(48, 87, 36);      /* primary */
    --color-brand-dot:       rgb(212, 197, 181);   /* d4c5b5 */
    --color-sale:            rgb(48, 87, 36);      /* green */
    --color-price-sale:      rgb(220, 38, 38);     /* red — used for sale prices */
    --color-orange:          rgb(255, 193, 7);     /* mustard */
    --color-orange-strong:   rgb(226, 173, 4);     /* deep mustard */
    --color-orange-light:    rgb(255, 216, 90);    /* light mustard */
    --color-gold:            rgb(155, 132, 56);    /* 9b8438 */
    --color-leaf:            rgb(95, 140, 45);     /* 5f8c2d */
    --color-verbena:         rgb(30, 70, 34);      /* 1e4622 */
    --color-whatsapp:        rgb(37, 211, 102);    /* 25D366 */
    --color-tooltip:         rgb(31, 41, 55);      /* 1f2937 */
    --color-media:           rgb(40, 58, 36);      /* dark green */
    --color-card-title:      rgb(35, 35, 35);      /* 232323 */
    --color-border-soft:     rgb(240, 240, 240);   /* f0f0f0 */
    --color-border-dashed:   rgb(238, 238, 238);   /* eee */
    --color-remove:          rgb(48, 87, 36);      /* green */
    --color-ticker-green:    rgb(43, 84, 44);      /* 2b542c */

    --color-border:          rgb(220, 225, 218);
    --color-border-dark:     rgb(180, 190, 175);

    --color-success:         rgb(40, 167, 69);
    --color-warning:         rgb(255, 193, 7);
    --color-error:           rgb(146, 104, 15);    /* dark mustard (no red) */
    --color-info:            rgb(48, 87, 36);

    /* --- Spacing --- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32:  128px;

    /* --- Layout --- */
    --container-max:         1200px;
    --container-wide:        1400px;
    --container-narrow:      800px;
    --container-padding:     var(--space-6);

    /* --- Borders & Radius --- */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  9999px;

    --border-width:          1px;
    --border-style:          solid;

    /* --- Shadows --- */
    --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:   0 8px 30px rgba(0,0,0,.12);
    --shadow-xl:   0 16px 48px rgba(0,0,0,.14);

    /* --- Transitions --- */
    --transition-fast:       150ms ease;
    --transition-base:       250ms ease;
    --transition-slow:       400ms ease;

    /* --- Z-index layers --- */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
}

/* =============================================================
   BASE RESET & GLOBALS
   ============================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:  var(--font-family-base);
    font-weight:  var(--font-weight-regular);
    font-size:    var(--font-size-base);
    line-height:  var(--line-height-base);
    color:        var(--color-text);
    background:   var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings — consume root vars, never hardcode */
h1, h2, h3, h4, h5, h6 {
    font-family:   var(--font-family-heading);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-primary);
    line-height:   var(--line-height-tight);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); line-height: var(--line-height-heading); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p  { margin-bottom: var(--space-4); color: var(--color-text); }
a  { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-light); }

img, svg { max-width: 100%; display: block; }

ul, ol { list-style: none; }