/* ==========================================================================
   Owlnit theme: design tokens
   Brand: midnight navy (#00132D) from the logo, with a softer coral-orange accent.
   Supporting accents give each product area its own colour so pages read at a glance:
     teal   = WhatsApp, success, live
     blue   = catalog, information
     navy   = brand, AI, defaults (no purple: it reads as template-made)
     amber  = campaigns, highlights
     red    = errors only (never the brand orange)
   Contrast: text colours (*-ink) and button fills meet WCAG AA (4.5:1) on white.
   Loaded after the template's styles.css; the bridge at the bottom remaps its variables.
   ========================================================================== */

:root {
    /* ---------- Brand ---------- */
    --gf-navy: #00132D;
    --gf-navy-2: #000B1A;
    --gf-navy-hover: #0B2547;
    --gf-navy-3: #13305A;
    --gf-navy-soft: #EEF2F8;
    /* One colour per element type, the same everywhere on the site */
    --gf-icon-bg: var(--gf-orange-soft);   /* icon tiles: brand accent */
    --gf-icon-ink: var(--gf-orange-ink);
    --gf-pill-bg: var(--gf-blue-soft);     /* pills: section labels */
    --gf-pill-ink: var(--gf-blue-ink);
    --gf-badge-bg: var(--gf-teal-soft);    /* badges: good news (free, trial, popular) */
    --gf-badge-ink: var(--gf-teal-ink);
    --gf-link-bg: var(--gf-navy);          /* card links: the action */
    --gf-link-ink: #FFFFFF;
    --gf-link-bg-hover: var(--gf-orange-strong);
    --gf-navy-line: rgba(255, 255, 255, .12);

    /* Softer coral-orange: graphics and large type use --gf-orange; text uses -ink;
       buttons with white text use -strong (AA) */
    --gf-orange: #F26B3A;
    --gf-orange-2: #E25A2A;
    --gf-orange-hover: #B8460F;
    --gf-orange-active: #A33E0D;
    --gf-orange-strong: #C94A16;
    --gf-orange-soft: #FFF2EC;
    --gf-orange-line: #FBD3C2;
    --gf-orange-ink: #C2410C;

    /* ---------- Supporting accents ---------- */
    --gf-teal: #0E9F7E;
    --gf-teal-soft: #E7F7F2;
    --gf-teal-ink: #08775E;

    --gf-blue: #2F6FED;
    --gf-blue-soft: #EBF2FE;
    --gf-blue-ink: #1D4FBF;


    --gf-amber: #F2A93B;
    --gf-amber-soft: #FEF6E6;
    --gf-amber-ink: #8A5800;

    --gf-red: #DC2626;
    --gf-red-soft: #FDECEC;

    /* Semantic aliases kept for the template and older page CSS */
    --gf-emerald: var(--gf-navy);
    --gf-emerald-2: var(--gf-navy-hover);
    --gf-emerald-line: rgba(255, 255, 255, .12);
    --gf-oxblood: var(--gf-red);
    --gf-oxblood-2: #B91C1C;
    --gf-gold: var(--gf-orange);
    --gf-gold-text: var(--gf-orange-ink);

    /* ---------- Surfaces ---------- */
    --gf-porcelain: #FFFFFF;
    --gf-porcelain-2: #F7F9FC;
    --gf-stone: #F0F3F8;
    --gf-stone-2: #E3E8F0;
    --gf-stone-line: #E3E8F0;

    --gf-ivory: var(--gf-porcelain-2);
    --gf-pearl: #FFFFFF;
    --gf-linen: var(--gf-stone);
    --gf-sand: var(--gf-stone-2);
    --gf-paper: var(--gf-porcelain-2);

    /* Orange ramp (named gold for the template) */
    --gf-gold-50: #FFF7F3;
    --gf-gold-100: #FFE9DF;
    --gf-gold-200: #FDD0BC;
    --gf-gold-300: #F9A684;
    --gf-gold-400: #F5845A;
    --gf-gold-500: #F26B3A;
    --gf-gold-600: #E25A2A;
    --gf-gold-700: #C2410C;
    --gf-rose-gold: #F9A684;
    --gf-rose-gold-deep: #C2410C;

    /* Darks */
    --gf-night: #000B1A;
    --gf-midnight: #00132D;
    --gf-teal-black: #000B1A;
    --gf-plum-black: #000D20;
    --gf-graphite: #0F172A;
    --gf-night-line: rgba(255, 255, 255, .12);

    /* Ink and lines */
    --gf-ink: #0B1A33;
    --gf-ink-2: #3B4A63;
    --gf-muted: #64748B;
    --gf-line: #E3E8F0;
    --gf-line-2: #EEF2F7;

    --gf-tint-emerald: var(--gf-teal-soft);
    --gf-tint-amethyst: var(--gf-navy-soft);
    --gf-tint-sapphire: var(--gf-blue-soft);
    --gf-tint-rose: var(--gf-orange-soft);
    --gf-tint-aqua: var(--gf-teal-soft);
    --gf-tint-champagne: var(--gf-amber-soft);

    --gf-success: var(--gf-teal);
    --gf-danger: var(--gf-red);

    /* ---------- Type: one modern sans for headings and text ---------- */
    --gf-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --gf-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ---------- Shape and motion ---------- */
    --gf-radius: 10px;
    --gf-radius-lg: 16px;
    --gf-shadow-sm: 0 1px 2px rgba(0, 19, 45, .04);
    --gf-shadow-md: 0 4px 14px -6px rgba(0, 19, 45, .12);
    --gf-ease: cubic-bezier(.22, .61, .36, 1);
    --gf-section-pad: clamp(48px, 6vw, 84px);
    --gf-header-h: 68px;
    --gf-bar-h: 34px;
    --gf-wrap: 1200px;

    --swiper-theme-color: #00132D;

    /* ---------- Template bridge ---------- */
    --primary: var(--gf-navy);
    --third: var(--gf-orange);
    --main: var(--gf-navy);
    --text: #475569;
    --text-2: var(--gf-ink-2);
    --text-3: #CBD5E1;
    --text-4: #475569;
    --text-5: var(--gf-orange-ink);
    --text-6: #94A3B8;
    --text-7: var(--gf-ink-2);
    --text-8: var(--gf-muted);
    --text-9: rgba(15, 23, 42, .5);
    --text-14: rgba(15, 23, 42, .6);
    --text-15: var(--gf-muted);
    --text-16: #94A3B8;

    --bg: var(--gf-linen);
    --bg-4: var(--gf-ivory);
    --bg-6: var(--gf-gold-50);
    --bg-7: rgba(255, 242, 236, .9);
    --bg-9: var(--gf-linen);
    --bg-11: var(--gf-linen);
    --bg-12: var(--gf-orange-soft);
    --bg-18: var(--gf-ivory);
    --bg-30: var(--gf-ivory);
    --bg-2: var(--gf-orange-strong);
    --bg-3: var(--gf-graphite);
    --bg-8: var(--gf-graphite);
    --bg-10: var(--gf-night);

    --line: var(--gf-line);
    --line-2: rgba(15, 23, 42, .12);
    --line-3: var(--gf-orange-soft);
    --line-4: #CBD5E1;
    --line-5: var(--gf-line);
    --line-6: var(--gf-orange-line);
    --line-8: var(--gf-line);

    --on-surface: var(--gf-midnight);
    --surface: var(--gf-ivory);
    --brand_100: var(--gf-orange-soft);

    /* Bootstrap bridge */
    --bs-body-font-family: var(--gf-body);
    --bs-body-color: var(--gf-ink-2);
    --bs-body-bg: #FFFFFF;
    --bs-border-color: var(--gf-line);
    --bs-link-color: var(--gf-navy);
    --bs-link-hover-color: var(--gf-orange-ink);
    --bs-primary: var(--gf-navy);
    --bs-primary-rgb: 0, 19, 45;
    --bs-danger: var(--gf-red);
    --bs-danger-rgb: 220, 38, 38;
    --bs-success: var(--gf-teal);
}