/* ==========================================================================
   theme.css — Adglow South Africa
   Design token system: colours, typography, spacing, radii, shadows, glows.
   All CSS custom properties that base/layout/components consume are defined
   here so a single file controls the full Adglow visual identity.
   ========================================================================== */

:root {

    /* -------------------------------------------------------------------------
       Typography
    ------------------------------------------------------------------------- */
    --font-family-heading: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
    --font-family-base:    "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
    --font-family-mono:    "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;

    /* Eyebrow colour — single source of truth */
    --color-eyebrow: #02B7D9;

    /* -------------------------------------------------------------------------
       Layout widths
    ------------------------------------------------------------------------- */
    --shell-width:              1240px;
    --content-width:            760px;
    --wide-content-width:       1040px;
    --hero-content-width:       1080px;
    --hero-heading-width:       960px;
    --image-cta-content-width:  860px;
    --narrow-width:             840px;

    /* -------------------------------------------------------------------------
       Spacing scale
    ------------------------------------------------------------------------- */
    --space-2xs: 0.35rem;
    --space-xs:  0.6rem;
    --space-sm:  0.9rem;
    --space-md:  1.25rem;
    --space-lg:  1.75rem;
    --space-xl:  2.5rem;
    --space-2xl: clamp(3rem, 6vw, 5rem);
    --space-3xl: clamp(4rem, 8vw, 7rem);

    /* -------------------------------------------------------------------------
       Section spacing — generous vertical rhythm
    ------------------------------------------------------------------------- */
    --section-space-sm:      clamp(2.5rem, 5vw, 4rem);
    --section-space:         clamp(3.5rem, 7vw, 6rem);
    --section-space-lg:      clamp(5rem, 9vw, 8rem);
    --hero-space-home:       clamp(5rem, 10vw, 8rem);
    --hero-space-inner:      clamp(3rem, 6vw, 5rem);
    --hero-space-contact:    clamp(3.5rem, 7vw, 5.5rem);

    /* -------------------------------------------------------------------------
       Logo size constraints
    ------------------------------------------------------------------------- */
    --header-logo-max-width:  170px;
    --header-logo-max-height: 48px;
    --footer-logo-max-width:  180px;
    --footer-logo-max-height: 64px;

    /* -------------------------------------------------------------------------
       Adglow palette — raw colour values
    ------------------------------------------------------------------------- */
    --adglow-black:       #03050d;
    --adglow-ink:         #07101f;
    --adglow-navy:        #0a1022;
    --adglow-panel:       #10182b;
    --adglow-panel-soft:  #f5f7fb;

    --adglow-white:       #ffffff;
    --adglow-off-white:   #f7f9fc;
    --adglow-muted:       #8f9bb3;
    --adglow-text-dark:   #101320;
    --adglow-text-light:  #e8edf7;

    --adglow-blue:        #1f5eff;
    --adglow-blue-bright: #37a1ff;
    --adglow-blue-soft:   rgba(31, 94, 255, 0.14);

    --adglow-green:       #b7ff3c;
    --adglow-green-soft:  rgba(183, 255, 60, 0.14);

    /* -------------------------------------------------------------------------
       Semantic colour roles
       (used by base.css, layout.css, and components.css via var())
    ------------------------------------------------------------------------- */
    --color-page:     var(--adglow-ink);
    --color-surface:  var(--adglow-panel);
    --color-heading:  var(--adglow-text-light);
    --color-text:     var(--adglow-text-light);
    --color-muted:    var(--adglow-muted);
    --color-border:   rgba(255, 255, 255, 0.09);
    --color-tint:     var(--adglow-navy);

    --color-brand:      var(--adglow-blue);
    --color-brand-dark: #163bbf;
    --color-on-brand:   var(--adglow-white);

    --color-accent: var(--adglow-green);
    --color-focus:  var(--adglow-blue);

    /* -------------------------------------------------------------------------
       Border colours (context-aware)
    ------------------------------------------------------------------------- */
    --color-border-dark:  rgba(255, 255, 255, 0.12);
    --color-border-light: rgba(10, 16, 34, 0.10);

    /* -------------------------------------------------------------------------
       Section backgrounds
    ------------------------------------------------------------------------- */
    --color-footer:        var(--adglow-black);
    --color-footer-text:   var(--adglow-text-light);
    --color-footer-muted:  var(--adglow-muted);

    --color-cta:           var(--adglow-ink);
    --color-cta-text:      var(--adglow-white);
    --color-cta-muted:     rgba(232, 237, 247, 0.70);

    --color-hero-text:     var(--adglow-white);
    --color-hero-muted:    var(--adglow-text-light);

    /* Dark digital section background — radial glows + gradient base */
    --bg-dark-digital:
        radial-gradient(circle at 18% 8%,  rgba(31, 94, 255, 0.28), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(183, 255, 60, 0.10), transparent 24%),
        linear-gradient(150deg, #03050d 0%, #07101f 50%, #0a1022 100%);

    /* Subtle grid overlay for dark sections */
    --bg-grid-image:
        linear-gradient(rgba(55, 161, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55, 161, 255, 0.07) 1px, transparent 1px);
    --bg-grid-size: 96px 96px;

    /* Default hero overlay opacity */
    --default-hero-overlay-opacity:      0.85;
    --default-image-cta-overlay-opacity: 0.85;

    /* -------------------------------------------------------------------------
       Border radii
    ------------------------------------------------------------------------- */
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-pill: 999px;

    /* -------------------------------------------------------------------------
       Shadows
    ------------------------------------------------------------------------- */
    --shadow-subtle:    0 4px 20px rgba(0, 0, 0, 0.28);
    --shadow-card:      0 16px 48px rgba(0, 0, 0, 0.36);
    --shadow-soft:      0 24px 72px rgba(0, 0, 0, 0.44);
    --shadow-lift:      0 32px 80px rgba(0, 0, 0, 0.52);
    --shadow-card-dark: 0 24px 80px rgba(0, 0, 0, 0.28);

    /* -------------------------------------------------------------------------
       Glow values — blue primary, green sparingly (~10%)
    ------------------------------------------------------------------------- */
    --glow-blue:        0 0 36px rgba(31, 94, 255, 0.35);
    --glow-blue-strong: 0 0 56px rgba(31, 94, 255, 0.50);
    --glow-green:       0 0 28px rgba(183, 255, 60, 0.22);
    --glow-button:      0 16px 44px rgba(31, 94, 255, 0.28);

    /* Legacy alias consumed by base/components */
    --button-shadow: var(--glow-button);

    /* -------------------------------------------------------------------------
       Button tokens
    ------------------------------------------------------------------------- */
    --button-radius:          var(--radius-pill);
    --button-font-weight:     600;
    --button-letter-spacing:  0.01em;

    --btn-primary-bg:     linear-gradient(135deg, var(--adglow-blue) 0%, var(--adglow-blue-bright) 100%);
    --btn-primary-color:  var(--adglow-white);
    --btn-primary-shadow: var(--glow-button);

    --btn-secondary-bg:     transparent;
    --btn-secondary-color:  var(--adglow-white);
    --btn-secondary-border: rgba(255, 255, 255, 0.38);

    --btn-secondary-light-bg:     var(--adglow-white);
    --btn-secondary-light-color:  var(--adglow-text-dark);
    --btn-secondary-light-border: rgba(10, 16, 34, 0.16);

    /* -------------------------------------------------------------------------
       Card tokens
    ------------------------------------------------------------------------- */
    --card-dark-bg:     linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    --card-dark-border: 1px solid rgba(255, 255, 255, 0.12);
    --card-dark-radius: var(--radius-lg);
    --card-dark-shadow: var(--shadow-card-dark);

    --card-light-bg:     var(--adglow-white);
    --card-light-border: 1px solid rgba(10, 16, 34, 0.10);
    --card-light-radius: var(--radius-lg);
    --card-light-shadow: var(--shadow-card);

    --card-transition:   transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;

    /* -------------------------------------------------------------------------
       Transition timing
    ------------------------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 400ms ease;

    /* -------------------------------------------------------------------------
       Focus ring
    ------------------------------------------------------------------------- */
    --focus-ring: 0 0 0 3px rgba(31, 94, 255, 0.45);
}

/* ==========================================================================
   Phase 5A — Extended accent palette + dark site base
   ========================================================================== */

:root {
    /* Phase 5D exact accent palette */
    --adglow-cyan:          #02B7D9;
    --adglow-cyan-soft:     rgba(2, 183, 217, 0.12);
    --adglow-magenta:       #BC0A4C;
    --adglow-magenta-soft:  rgba(188, 10, 76, 0.12);
    --adglow-lime:          #A4CB0A;
    --adglow-lime-soft:     rgba(164, 203, 10, 0.12);
    --adglow-amber:         #DF8502;
    --adglow-amber-soft:    rgba(223, 133, 2, 0.12);
}

html {
    background: #0b0b10;
}

body {
    background: transparent;
}

/* ==========================================================================
   Global typography
   ========================================================================== */

body {
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Montserrat for all headings — hero titles, section headings, card titles,
   marketing statements */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

h1 {
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
}

h2 {
    font-weight: 700;
}

h3 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* ==========================================================================
   Heading word glow — apply to <span class="text-glow text-glow--{colour}">
   ========================================================================== */

.text-glow {
    display: inline;
    font-weight: inherit;
}

.text-glow--pink {
    color: #f0166a;
    text-shadow:
        0 0 18px rgba(240, 22, 106, 0.65),
        0 0 40px rgba(240, 22, 106, 0.30);
}

.text-glow--green {
    color: var(--adglow-lime);
    text-shadow:
        0 0 18px rgba(164, 203, 10, 0.65),
        0 0 40px rgba(164, 203, 10, 0.30);
}

.text-glow--blue {
    color: var(--adglow-cyan);
    text-shadow:
        0 0 18px rgba(2, 183, 217, 0.65),
        0 0 40px rgba(2, 183, 217, 0.30);
}

.text-glow--orange {
    color: var(--adglow-amber);
    text-shadow:
        0 0 18px rgba(223, 133, 2, 0.65),
        0 0 40px rgba(223, 133, 2, 0.30);
}

/* Focus ring — keyboard-visible only */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Reduced motion — accessibility baseline
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto !important;
    }
}