/*
 * Child Theme – Design Token Overrides
 *
 * Override the parent theme's visual identity here.
 * Uncomment and change only what you need — everything else
 * inherits from the parent automatically.
 *
 * No build step needed — just edit and save.
 *
 * Full token reference: see parent theme's src/css/app.css
 */

:root {
    /* ==========================================================
     * COLORS
     * ========================================================== */

    /* Primary brand color — used for buttons, links, active states,
     * feature icon backgrounds, focus rings, highlighted elements */
    /* --color-primary: #3b82f6; */
    /* --color-primary-hover: #2563eb; */
    /* --color-primary-light: #dbeafe; */

    /* Secondary accent — secondary buttons, badges, accents */
    /* --color-secondary: #10b981; */
    /* --color-secondary-hover: #059669; */

    /* Text colors */
    /* --color-heading: #111827; */     /* h1–h6, card titles, bold labels */
    /* --color-text: #374151; */        /* Body paragraphs, descriptions */
    /* --color-text-muted: #6b7280; */  /* Subheadlines, meta text, captions */
    /* --color-text-light: #9ca3af; */  /* Placeholders, very subtle labels */

    /* Backgrounds & surfaces */
    /* --color-background: #ffffff; */    /* Page background, card inner bg */
    /* --color-surface: #f9fafb; */       /* Section backgrounds, card surfaces, hover states */
    /* --color-surface-dark: #f3f4f6; */  /* Darker surface (alternating sections) */
    /* --color-border: #e5e7eb; */        /* Borders, dividers, input outlines, table lines */

    /* Status colors — banners, form validation, notices */
    /* --color-success: #10b981; */
    /* --color-warning: #f59e0b; */
    /* --color-error: #ef4444; */

    /* ==========================================================
     * TYPOGRAPHY
     * ========================================================== */

    /* Font families — change these to match the client's brand
     * Remember to enqueue the font in functions.php if using Google Fonts */
    /* --font-heading: 'Inter', system-ui, sans-serif; */
    /* --font-body: 'Inter', system-ui, sans-serif; */
    /* --font-mono: 'JetBrains Mono', monospace; */

    /* Font sizes — controls the global type scale
     * Components use these via Tailwind classes (text-sm, text-lg, etc.)
     * and via the clesk-heading-1/2/3 utility classes */
    /* --font-size-xs: 0.75rem; */    /* 12px — badges, fine print */
    /* --font-size-sm: 0.875rem; */   /* 14px — card text, meta, small UI */
    /* --font-size-base: 1rem; */     /* 16px — body text default */
    /* --font-size-lg: 1.125rem; */   /* 18px — lead paragraphs, subheadlines */
    /* --font-size-xl: 1.25rem; */    /* 20px — small headings */
    /* --font-size-2xl: 1.5rem; */    /* 24px — card headings */
    /* --font-size-3xl: 1.875rem; */  /* 30px — section headings (mobile) */
    /* --font-size-4xl: 2.25rem; */   /* 36px — section headings (desktop) */
    /* --font-size-5xl: 3rem; */      /* 48px — hero headings */

    /* ==========================================================
     * SPACING & LAYOUT
     * ========================================================== */

    /* Section vertical padding — controls whitespace between page sections */
    /* --section-padding-y: 4rem; */      /* 64px — mobile */
    /* --section-padding-y-lg: 6rem; */   /* 96px — desktop (lg breakpoint) */

    /* Container — max content width and horizontal padding */
    /* --container-max-width: 85rem; */   /* 1360px */
    /* --container-padding-x: 1rem; */    /* 16px (sm:24px lg:32px via Tailwind) */

    /* ==========================================================
     * BORDER RADIUS
     * ========================================================== */

    /* Controls roundness of all elements globally
     * Set all to 0 for a sharp, corporate look
     * Set --radius-lg to 1.5rem for a softer, modern feel */
    /* --radius-sm: 0.25rem; */   /* 4px — badges, tags, small pills */
    /* --radius-md: 0.5rem; */    /* 8px — inputs, small cards, dropdowns */
    /* --radius-lg: 0.75rem; */   /* 12px — cards, modals, feature blocks */
    /* --radius-xl: 1rem; */      /* 16px — large cards, hero images */
    /* --radius-full: 9999px; */  /* Fully round — avatars, pill buttons */

    /* ==========================================================
     * SHADOWS
     * ========================================================== */

    /* --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); */       /* Subtle — inputs, small cards */
    /* --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); */      /* Medium — card hover states */
    /* --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); */    /* High — dropdowns, mega menu */
    /* --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); */    /* Highest — modals, overlays */

    /* ==========================================================
     * TRANSITIONS
     * ========================================================== */

    /* --transition-fast: 150ms ease; */    /* Hover color changes, micro-interactions */
    /* --transition-normal: 200ms ease; */  /* Card hover, link transitions */
    /* --transition-slow: 300ms ease; */    /* Dropdown open, larger animations */
}

/* ==========================================================
 * CUSTOM STYLES
 *
 * Add project-specific CSS below. You can:
 * - Override component styles (use higher specificity or !important sparingly)
 * - Add new utility classes
 * - Style custom post type templates
 *
 * All Tailwind utilities from the parent theme are available.
 * ========================================================== */