/*
Theme Name: Astra Child - Avloserkortet
Theme URI: https://avloserkortet.no
Description: Astra child theme for Avloserkortet with custom ACF blocks
Author: Avloserkortet
Author URI: https://avloserkortet.no
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/*
 * Avløserkortet Brand Guide
 * Version: 1.0 – Februar 2026
 */
:root {
    /* ===================
       CONTAINER WIDTH (From Astra Customizer)
       =================== */
    --container-width: var(--wp--custom--ast-container-width, 1280px);

    /* ===================
       PRIMARY COLOR (From Astra Customizer)
       =================== */
    --color-primary: var(--ast-global-color-0, #10b981);  /* Primary from Astra Customizer */

    /* ===================
       SECONDARY (AMBER)
       =================== */
    --color-amber-400: #fbbf24;    /* Badges, varsler, "valgfri"-tags */
    --color-amber-500: #f59e0b;    /* Ikoner for oppmerksomhet */

    /* ===================
       NEUTRAL (SLATE)
       =================== */
    --color-slate-50: #f8fafc;     /* Lys seksjonsbakgrunn */
    --color-slate-100: #f1f5f9;    /* Kort-bakgrunn, borders */
    --color-slate-400: #94a3b8;    /* Placeholder, subtil tekst */
    --color-slate-500: #64748b;    /* Sekundær tekst */
    --color-slate-600: #475569;    /* Brødtekst */
    --color-slate-700: #334155;    /* Underoverskrifter */
    --color-slate-800: #1e293b;    /* Overskrifter */
    --color-slate-900: #0f172a;    /* Mørk bakgrunn (hero, footer) */

    /* ===================
       SPECIAL COLORS
       =================== */
    --color-blue-500: #3b82f6;     /* Informasjon, regionale forskjeller */
    --color-red-500: #ef4444;      /* Feil, advarsler, utfordringer */
    --color-purple-500: #8b5cf6;   /* Ungdom, målgrupper */
    --color-cyan-500: #06b6d4;     /* Utenlandsk bakgrunn */
    --color-rose-500: #f43f5e;     /* Erfarne avløsere */

    /* ===================
       HERO GRADIENT COLORS
       =================== */
    --color-hero-1: #1e293b;
    --color-hero-2: #0f172a;
    --color-hero-3: #134e4a;
    --color-hero-4: #1e3a5f;

    /* ===================
       SPACING (4px grid)
       =================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;

    /* ===================
       BORDER RADIUS
       =================== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ===================
       SHADOWS
       =================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-primary: 0 10px 20px rgba(16, 185, 129, 0.25);

    /* ===================
       LEGACY MAPPINGS
       (for backwards compatibility)
       =================== */
    --brand-primary: var(--color-primary);
    --brand-secondary: var(--color-hero-3);
    --brand-dark-1: var(--color-slate-900);
    --brand-dark-2: var(--color-slate-800);
    --brand-dark-3: var(--color-hero-4);
    --brand-text: var(--color-slate-800);
    --brand-text-light: var(--color-slate-400);
}