/* =========================================================
 * SSCL — Colors & Type
 * Source of truth for design-system tokens. Values verified
 * against sscl-website/src/styles/global.css and Tailwind
 * utilities used across the codebase.
 * ========================================================= */

/* ---------- Google Fonts ---------- */
/* Plus Jakarta Sans (sans), Barlow Condensed (condensed), JetBrains Mono (mono) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Barlow+Condensed:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
    /* =========================================================
     * COLORS — BRAND
     * ========================================================= */

    /* Primary brand navy — used for header, footer, reversed surfaces */
    --color-primary-blue: #232a33;

    /* Brand teal family (primary action / accent) */
    --color-teal-primary: #11b7a2;   /* default teal */
    --color-teal-dark:    #069483;   /* hover, stronger teal */
    --color-teal-deep:    #00584e;   /* deep teal — CTA, footer accents */
    --color-teal-darker:  #063b3e;   /* deepest teal, muted surfaces */
    --color-teal-600:     #0d9488;   /* tailwind teal-600, used in brochure btn */
    --color-teal-700:     #0f766e;   /* tailwind teal-700, used in contact CTA */
    --color-teal-800:     #115e59;
    --color-teal-300:     #5eead4;   /* service icon circle border */
    --color-teal-500:     #14b8a6;   /* hero text gradient end */

    /* Brand green family (secondary accent, illustrations) */
    --color-green-primary:      #46a96a;   /* lighter vibrant green */
    --color-custom-green:       #47e18c;   /* bright mint — hero gradient, highlights */
    --color-custom-light-green: #a3e635;   /* lime — decorative accents */
    --color-custom-yellow:      #bef264;   /* pale yellow-green — decorative */

    /* Muted teal surfaces (cards, dividers, subtle fills) */
    --color-custom-light-blue:   #e0eeec;  /* mint-tinted surface */
    --color-custom-light-blue-2: #8cd2cd;  /* mid teal surface */
    --color-custom-off-white:    #eef6f5;  /* slight teal wash */
    --color-custom-dark-white:   #f3f9f9;  /* very slight teal wash */

    /* =========================================================
     * COLORS — NEUTRALS (Tailwind gray/zinc/slate used in code)
     * ========================================================= */
    --color-gray-50:   #f9fafb;
    --color-gray-100:  #f3f4f6;
    --color-gray-200:  #e5e7eb;
    --color-gray-300:  #d1d5db;
    --color-gray-400:  #9ca3af;
    --color-gray-500:  #6b7280;
    --color-gray-600:  #4b5563;
    --color-gray-700:  #374151;
    --color-gray-800:  #1f2937;
    --color-gray-900:  #111827;
    --color-gray-950:  #030712;

    --color-slate-50:  #f8fafc;
    --color-slate-700: #334155;   /* footer divider */

    --color-zinc-100:  #f4f4f5;
    --color-zinc-700:  #3f3f46;
    --color-zinc-800:  #27272a;

    /* =========================================================
     * SEMANTIC — FOREGROUND / BACKGROUND
     * ========================================================= */
    --fg:        var(--color-gray-900);
    --fg-muted:  var(--color-gray-600);
    --fg-subtle: var(--color-gray-500);
    --fg-inverse: #ffffff;

    --bg:         #ffffff;
    --bg-subtle:  var(--color-gray-50);
    --bg-muted:   var(--color-gray-100);
    --bg-inverse: var(--color-primary-blue);   /* navy reverse surface */
    --bg-accent:  var(--color-custom-off-white);

    /* Accent / action */
    --accent:        var(--color-teal-primary);
    --accent-hover:  var(--color-teal-dark);
    --accent-pressed:var(--color-teal-deep);
    --accent-bg:     var(--color-custom-light-blue);

    /* Borders */
    --border:        var(--color-gray-200);
    --border-strong: var(--color-gray-300);
    --border-accent: var(--color-teal-primary);
    --border-dashed-hero: var(--color-teal-700);  /* dotted-variant btn */

    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* Radii — codebase uses md / lg / xl primarily */
    --radius-sm:  0.25rem;     /* 4  — tags */
    --radius:     0.375rem;    /* 6  — chips */
    --radius-md:  0.5rem;      /* 8  — cards, inputs */
    --radius-lg:  0.5rem;      /* 8  — sections */
    --radius-xl:  0.75rem;     /* 12 — buttons */
    --radius-full:9999px;      /* circular (service icons, avatars) */

    /* Spacing (Tailwind scale) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Layout */
    --container-max: 1920px;
    --header-h:      86px;

    /* =========================================================
     * TYPE — FAMILIES
     * ========================================================= */
    --font-sans:      "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --font-condensed: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
    --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* =========================================================
     * TYPE — SCALE (matches Tailwind + codebase conventions)
     * ========================================================= */
    --text-xs:  0.75rem;   /* 12 */
    --text-sm:  0.875rem;  /* 14 */
    --text-base:1rem;      /* 16 */
    --text-md:  1rem;      /* alias used in code */
    --text-lg:  1.125rem;  /* 18 */
    --text-xl:  1.25rem;   /* 20 */
    --text-2xl: 1.5rem;    /* 24 */
    --text-3xl: 1.875rem;  /* 30 */
    --text-4xl: 2.25rem;   /* 36 */
    --text-5xl: 3rem;      /* 48 */
    --text-6xl: 3.75rem;   /* 60 */
    --text-7xl: 4.5rem;    /* 72 */

    /* Weights used in code */
    --fw-light:    300;
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Leading */
    --leading-tight:   1.1;
    --leading-snug:    1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;
}

/* =========================================================
 * BASE TYPE RESETS (scoped .sscl — so it composes safely)
 * ========================================================= */
.sscl {
    font-family: var(--font-sans);
    color: var(--fg);
    background: var(--bg-subtle);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

/* Headings used across the site:
 *   hero-title-1 / hero-title-2 — product page hero (white-on-image)
 *   section-h1 / section-h2 / section-h3 — recurring section stack
 */
.sscl h1,
.sscl .hero-title-1 {
    font-size: var(--text-5xl);
    font-weight: var(--fw-bold);
    line-height: var(--leading-tight);
    color: var(--fg-inverse);
    letter-spacing: -0.01em;
}
@media (min-width: 1024px) { .sscl .hero-title-1 { font-size: var(--text-6xl); } }
@media (min-width: 1280px) { .sscl .hero-title-1 { font-size: var(--text-7xl); } }

.sscl .hero-title-2 {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-tight);
    color: var(--fg-inverse);
}
@media (min-width: 1024px) { .sscl .hero-title-2 { font-size: var(--text-3xl); } }
@media (min-width: 1280px) { .sscl .hero-title-2 { font-size: var(--text-4xl); } }

.sscl .section-h1 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: var(--leading-tight);
}
@media (min-width: 768px) { .sscl .section-h1 { font-size: var(--text-4xl); } }

.sscl .section-h2 {
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
}
@media (min-width: 768px) { .sscl .section-h2 { font-size: var(--text-3xl); } }

.sscl .section-h3 {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
}

.sscl h2 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); line-height: var(--leading-snug); }
.sscl h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.sscl h4 { font-size: var(--text-lg); font-weight: var(--fw-semibold); }

.sscl p     { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-muted); }
.sscl .lead { font-size: var(--text-lg);  line-height: var(--leading-relaxed); color: var(--color-gray-700); }
.sscl small { font-size: var(--text-sm); color: var(--fg-subtle); }

.sscl code, .sscl pre, .sscl .mono {
    font-family: var(--font-mono);
}

/* Signature teal→green gradient text — seen in homepage hero */
.sscl .gradient-text,
.sscl .gradient-animation-hero-title {
    background: linear-gradient(90deg, var(--color-teal-500), var(--color-custom-green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
}

/* Gradient bg — used on CTAs and marketing surfaces */
.sscl .bg-brand-gradient {
    background: linear-gradient(90deg, var(--color-teal-primary), var(--color-green-primary));
}

/* Signature wiggle animation (tech stack letters) */
@keyframes sscl-wiggle {
    0%, 100% { transform: rotate(-10deg); }
    50%      { transform: rotate( 10deg); }
}
.sscl .animate-wiggle { animation: sscl-wiggle 1s ease-in-out infinite; }

/* Marquee (client logos) */
@keyframes sscl-marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.sscl .animate-marquee { animation: sscl-marquee 20s linear infinite; }

/* Subtle in / out */
@keyframes sscl-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sscl .fade-in { animation: sscl-fade-in 0.4s ease-out forwards; }