/*
 * Gapfy brand tokens.
 *
 * Single source of truth for colour, typography, radius, spacing and
 * shadows across the Gapfy product family (Website, Maestro, Harmony).
 * Other apps copy this file verbatim and override individual variables
 * inside their own component scopes when they need to deviate.
 *
 * Palette derived from the canonical Gapfy logo:
 *   - Icon background: #3DA6DD (sky/cyan blue, official brand)
 *   - Wordmark: #1A1A1A (near-black)
 *
 * Display family: Inter (loaded from Google Fonts in App.razor).
 * Inspired by the Atlassian product family layout: deep ink for body
 * copy, brand blue used sparingly for highlights and primary CTAs.
 */

:root {
    /* Primary palette - the logo icon blue */
    --gapfy-primary: #3DA6DD;
    --gapfy-primary-strong: #2A8BC4;
    --gapfy-primary-soft: #E5F3FB;
    --gapfy-accent: #1A78B0;
    --gapfy-accent-strong: #0F5B8A;

    /* Neutrals - Atlassian-style deep navy ink + supporting greys */
    --gapfy-ink: #172B4D;
    --gapfy-ink-soft: #344563;
    --gapfy-ink-deep: #091E42;
    --gapfy-muted: #5E6C84;
    --gapfy-line: #DFE1E6;
    --gapfy-line-strong: #C1C7D0;

    /* Surfaces */
    --gapfy-bg: #FFFFFF;
    --gapfy-bg-soft: #F4F5F7;
    --gapfy-bg-elevated: #FFFFFF;
    --gapfy-bg-tint: #DEEBFF;
    --gapfy-navbar-bg: rgba(255, 255, 255, 0.92);

    /* Status */
    --gapfy-success: #16A34A;
    --gapfy-warning: #F59E0B;
    --gapfy-danger: #DC2626;

    /* Typography - Inter with system fallbacks */
    --gapfy-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --gapfy-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --gapfy-text-xs: 0.75rem;
    --gapfy-text-sm: 0.875rem;
    --gapfy-text-base: 1rem;
    --gapfy-text-lg: 1.125rem;
    --gapfy-text-xl: 1.25rem;
    --gapfy-text-2xl: 1.5rem;
    --gapfy-text-3xl: 1.875rem;
    --gapfy-text-4xl: 2.5rem;
    --gapfy-text-5xl: 3.25rem;
    --gapfy-text-6xl: 4rem;

    /* Radius - smaller, more rectangular like Atlassian */
    --gapfy-radius-sm: 3px;
    --gapfy-radius: 6px;
    --gapfy-radius-lg: 12px;
    --gapfy-radius-xl: 20px;
    --gapfy-radius-pill: 9999px;

    /* Elevation - rgba uses ink-deep (#091E42 = 9,30,66) for tonal consistency */
    --gapfy-shadow-sm: 0 1px 2px rgba(9, 30, 66, 0.08);
    --gapfy-shadow: 0 4px 12px rgba(9, 30, 66, 0.10);
    --gapfy-shadow-lg: 0 20px 48px rgba(9, 30, 66, 0.18);

    /* Gradients - lighter -> primary -> deeper for hero washes */
    --gapfy-gradient-primary: linear-gradient(135deg, #5DB9E8 0%, #3DA6DD 50%, #2A8BC4 100%);
    --gapfy-gradient-surface: linear-gradient(180deg, #F4F5F7 0%, #FFFFFF 100%);

    /* Accent / mesh palette - Stripe-style flowing colours used in the
       hero mesh, in inline word highlights and in subtle hover accents.
       The brand blue stays the primary identity colour; this palette
       extends it with violet + pink/magenta so the marketing surface
       feels less corporate and more editorial.
       Mesh stops are kept as named tokens so the hero composition
       can be re-tuned without touching the keyframes. */
    --gapfy-accent-violet: #7C6CFF;
    --gapfy-accent-magenta: #FF6BB5;
    --gapfy-accent-coral: #FF8A65;
    --gapfy-accent-sky: #5DB9E8;
    --gapfy-gradient-accent: linear-gradient(120deg, #3DA6DD 0%, #7C6CFF 50%, #FF6BB5 100%);
    --gapfy-gradient-accent-soft: linear-gradient(120deg, rgba(61, 166, 221, 0.15) 0%, rgba(124, 108, 255, 0.15) 50%, rgba(255, 107, 181, 0.15) 100%);

    /* Layout */
    --gapfy-container-max: 1240px;
    --gapfy-header-height: 72px;

    /* Motion - shared easings + durations.
       Stripe / Linear style: cubic-bezier(0.16, 1, 0.3, 1) is "out-expo",
       gives the "settles into place" feel at the end of hovers and reveals.
       Older transitions wrote 0.15s ease directly; new code uses these
       tokens so the whole site moves with the same vocabulary. */
    --gapfy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --gapfy-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --gapfy-dur-fast: 180ms;
    --gapfy-dur-base: 280ms;
    --gapfy-dur-slow: 480ms;
}

/* ============================================================
   Dark mode tokens.
   ============================================================
   Two activation paths:
     1. Explicit user choice via cookie. ThemeController writes
        `gapfy.theme=dark`, App.razor renders <html class="theme-dark">.
     2. OS preference fallback when no cookie set. The media query
        below targets html elements without either theme-* class.

   The :not(.theme-light) on the media query lets a user who picked
   light explicitly keep that choice on a dark-OS machine.

   Keep the two blocks in sync: anything in .theme-dark must also
   appear in the @media block (vice versa).
   ============================================================ */

:root.theme-dark {
    color-scheme: dark;
    --gapfy-primary-soft: #102E45;
    --gapfy-ink: #E6EDF3;
    --gapfy-ink-soft: #B8C5D3;
    --gapfy-ink-deep: #050B14;
    --gapfy-muted: #8B97AB;
    --gapfy-line: #243149;
    --gapfy-line-strong: #324569;
    --gapfy-bg: #0F1419;
    --gapfy-bg-soft: #161D26;
    --gapfy-bg-elevated: #1C2530;
    --gapfy-bg-tint: #0F2840;
    --gapfy-navbar-bg: rgba(15, 20, 25, 0.88);
    --gapfy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50);
    --gapfy-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
    --gapfy-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65);
    --gapfy-gradient-surface: linear-gradient(180deg, #0B1016 0%, #161D26 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not(.theme-light):not(.theme-dark) {
        color-scheme: dark;
        --gapfy-primary-soft: #102E45;
        --gapfy-ink: #E6EDF3;
        --gapfy-ink-soft: #B8C5D3;
        --gapfy-ink-deep: #050B14;
        --gapfy-muted: #8B97AB;
        --gapfy-line: #243149;
        --gapfy-line-strong: #324569;
        --gapfy-bg: #0F1419;
        --gapfy-bg-soft: #161D26;
        --gapfy-bg-elevated: #1C2530;
        --gapfy-bg-tint: #0F2840;
        --gapfy-navbar-bg: rgba(15, 20, 25, 0.88);
        --gapfy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50);
        --gapfy-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
        --gapfy-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65);
        --gapfy-gradient-surface: linear-gradient(180deg, #0B1016 0%, #161D26 100%);
    }
}