/*
Theme Name:   Suppora Bricks Child
Theme URI:    https://suppora.eu
Description:  Suppora GmbH brand theme — child of Bricks. Brand tokens as CSS Custom Properties.
Author:       Suppora GmbH
Author URI:   https://suppora.eu
Template:     bricks
Version:      1.0.0
Text Domain:  suppora
*/

/* ═══════════════════════════════════════════════════════════════════
   Suppora Brand Tokens — Single Source of Truth
   Used by Bricks Globals, custom components, and inline overrides.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand colors ──────────────────────────────────────── */
    --pri:        #38a89d;
    --pri-light:  #4ecdc4;
    --pri-dark:   #2d8a81;
    --pri-50:     #e8f5f3;
    --pri-100:    #d1ebe7;
    --pri-200:    #a3d7cf;
    --sec:        #0f3f34;
    --sec-light:  #1a5c4a;
    --dark:       #0a2920;

    /* ── Neutrals ──────────────────────────────────────────── */
    --light:        #f8fafa;
    --gray:         #5a6c66;
    --gray-light:   #e4ebe9;
    --gray-200:     #e4ebe9;
    --gray-400:     #8a9b95;
    --gray-500:     #5a6c66;
    --white:        #ffffff;

    /* ── Semantic ──────────────────────────────────────────── */
    --success: #28c840;
    --warning: #febc2e;
    --error:   #ff5f57;
    --info:    #38a89d;

    /* ── Typography ────────────────────────────────────────── */
    --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
    --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

    --text-xs:   0.75rem;   /* 12px */
    --text-s:   0.875rem;  /* 14px */
    --text-m: 1rem;      /* 16px */
    --text-l:   1.125rem;  /* 18px */
    --text-l:   1.25rem;   /* 20px */
    --text-xl:  1.5rem;    /* 24px */
    --text-2xl:  2rem;      /* 32px */
    --text-3xl:  2.5rem;    /* 40px */
    --text-4xl:  3.25rem;   /* 52px */
    --text-5xl:  4rem;      /* 64px */

    --lh-tight:  1.2;
    --lh-snug:   1.4;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    /* ── Spacing scale ─────────────────────────────────────── */
    --sp-1:  0.25rem;   /* 4px */
    --sp-2:  0.5rem;    /* 8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.5rem;    /* 24px */
    --sp-6:  2rem;      /* 32px */
    --sp-8:  3rem;      /* 48px */
    --sp-10: 4rem;      /* 64px */
    --sp-12: 5rem;      /* 80px */
    --sp-16: 8rem;      /* 128px */

    /* ── Radii ─────────────────────────────────────────────── */
    --radius-sm:   8px;
    --radius:      16px;
    --radius-lg:   24px;
    --radius-full: 50px;

    /* ── Gradients ─────────────────────────────────────────── */
    --gradient-primary:      linear-gradient(135deg, #38a89d 0%, #2d8a81 100%);
    --gradient-primary-light: linear-gradient(135deg, #4ecdc4 0%, #38a89d 100%);
    --gradient-dark:         linear-gradient(135deg, #0f3f34 0%, #1a5c4a 100%);
    --gradient-dark-reverse: linear-gradient(180deg, #0f3f34 0%, #0a2920 100%);

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-sm:      0 2px 8px rgba(15, 63, 52, 0.08);
    --shadow-md:      0 8px 30px rgba(15, 63, 52, 0.12);
    --shadow-lg:      0 20px 60px rgba(15, 63, 52, 0.18);
    --shadow-primary: 0 8px 30px rgba(56, 168, 157, 0.35);

    /* ── Layout ────────────────────────────────────────────── */
    --container-max: 1200px;
    --container-pad: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   Base typography overrides
   ═══════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    color: var(--sec);
    line-height: var(--lh-normal);
    background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--sec);
}

/* Notranslate class — never translate brand names */
.notranslate,
[translate="no"] {
    /* Reserved for "Suppora", "OperoGuide", etc. */
}