/* ==========================================================================
   CODETICA — Design tokens
   Single source of truth for colour, type, space, motion and elevation.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------- Brand green
       #2C7C42 is sampled from codetica-logo.png and is the brand constant.
       The lighter steps exist because #2C7C42 only reaches 3.9:1 on the dark
       surface; --accent (7.1:1) and --accent-bright (9.0:1) carry the accent
       on dark, --brand carries it on white (5.2:1). */
    --green-900: #0C2A18;
    --green-800: #133F23;
    --green-700: #1E5C31;
    --brand:     #2C7C42;
    --green-500: #23B45F;
    --accent:    #23B45F;
    --accent-bright: #3EDC85;
    --accent-glow:   #5FE39B;

    /* ------------------------------------------------------- Dark surfaces */
    --ink-1000: #020A0E;
    --ink-950:  #040E13;
    --ink-900:  #061015;
    --ink-850:  #08161C;
    --ink-800:  #0A1A21;
    --ink-700:  #0E2530;
    --ink-600:  #14303C;

    /* ------------------------------------------------------ Light surfaces */
    --paper:      #FFFFFF;
    --paper-alt:  #F4F7F8;
    --paper-deep: #EAEFF1;

    /* ------------------------------------------------------------- Content */
    --on-dark:        #FFFFFF;
    --on-dark-2:      #B7C4CA;
    --on-dark-3:      #8A9AA3;
    --on-dark-4:      #6E8089;

    --on-light:       #061015;
    --on-light-2:     #47585F;
    --on-light-3:     #66757C;   /* 4.77:1 on white — was #6B7A81 at 4.44, just under AA */

    /* -------------------------------------------------------------- Lines */
    --line-dark:      rgba(255, 255, 255, .09);
    --line-dark-2:    rgba(255, 255, 255, .16);
    --line-light:     #E1E7E9;
    --line-light-2:   #CDD6D9;

    /* ------------------------------------------------------------ Support */
    --teal:   #2FA8B8;
    --steel:  #4E7C8C;
    --warn:   #E2A33C;
    --error:  #E05B4B;

    /* ------------------------------------------------------- Typography */
    --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --fs-display: clamp(2.6rem, 1.35rem + 5vw, 5.25rem);
    --fs-h1:      clamp(2.15rem, 1.35rem + 3.3vw, 4rem);
    --fs-h2:      clamp(1.8rem, 1.28rem + 2.2vw, 3rem);
    --fs-h3:      clamp(1.35rem, 1.15rem + 0.85vw, 1.9rem);
    --fs-h4:      clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
    --fs-lead:    clamp(1.03rem, 0.98rem + 0.3vw, 1.2rem);
    --fs-body:    1rem;
    --fs-sm:      0.875rem;
    --fs-xs:      0.8125rem;
    --fs-eyebrow: 0.6875rem;

    --lh-tight:   1.04;
    --lh-snug:    1.16;
    --lh-normal:  1.55;
    --lh-relaxed: 1.68;

    --tracking-display: -0.028em;
    --tracking-tight:   -0.018em;
    --tracking-eyebrow: 0.2em;

    /* ------------------------------------------------------------- Space */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-20: 5rem;
    --s-24: 6rem;

    /* Section rhythm. Trimmed ~25% from the original scale: the pages read
       as one continuous document instead of a stack of islands separated by
       empty bands. 104px top and bottom on desktop, 56px on a phone. */
    --section-y: clamp(3.25rem, 2rem + 4vw, 5.75rem);
    --section-y-sm: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem);
    --container: 1440px;
    --container-narrow: 880px;
    --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

    /* ------------------------------------------------------------ Shape */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 8px;
    /* Application cards. Softer than --r-sm on purpose; one knob, so the same
       corner can be given to the other cards later without hunting for it. */
    --r-card: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* ---------------------------------------------------------- Elevation */
    --shadow-sm: 0 1px 2px rgba(2, 10, 14, .06), 0 2px 8px rgba(2, 10, 14, .04);
    --shadow-md: 0 2px 6px rgba(2, 10, 14, .07), 0 12px 32px rgba(2, 10, 14, .08);
    --shadow-lg: 0 4px 12px rgba(2, 10, 14, .1), 0 28px 64px rgba(2, 10, 14, .14);
    --shadow-dark: 0 24px 64px rgba(0, 0, 0, .55);
    --glow-accent: 0 0 0 1px rgba(35, 180, 95, .35), 0 8px 32px rgba(35, 180, 95, .18);

    /* ------------------------------------------------------------ Motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 160ms;
    --dur-2: 280ms;
    --dur-3: 520ms;
    --dur-4: 900ms;

    /* ------------------------------------------------------------ Layers */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 200;
    --z-mega: 210;
    --z-drawer: 300;
    --z-overlay: 400;

    --header-h: 76px;
}

@media (max-width: 900px) {
    :root {
        --header-h: 64px;
    }
}

/* ---------------------------------------------------------------- Ultra-wide
   Every scale above tops out near 1300px, so on a 2500-3000px display the whole
   site rendered as the 1320px design floating in the middle of the screen.

   2130px is where the container clamps stop returning their minimum, so that is
   where this tier starts. Each value below is tuned to equal its old maximum at
   exactly 2130px and grow from there — the change is continuous, and nothing at
   or below 1920px moves at all. */

@media (min-width: 1800px) {
    :root {
        --container: 1560px;
    }
}

@media (min-width: 2130px) {
    :root {
        --container: clamp(1560px, 73vw, 1980px);
        --fs-display: clamp(5.25rem, 0.724rem + 3.4vw, 7.5rem);
        --fs-h1:      clamp(4rem, 0.539rem + 2.6vw, 5.5rem);
        --fs-h2:      clamp(3rem, 0.471rem + 1.9vw, 4rem);
        --fs-h3:      clamp(1.9rem, 0.702rem + 0.9vw, 2.4rem);
        --fs-h4:      clamp(1.3rem, 0.741rem + 0.42vw, 1.6rem);
        --fs-lead:    clamp(1.2rem, 0.721rem + 0.36vw, 1.45rem);
        --fs-body:    clamp(1rem, 0.627rem + 0.28vw, 1.18rem);
        --fs-sm:      clamp(0.875rem, 0.542rem + 0.25vw, 1.03rem);
        --fs-xs:      clamp(0.8125rem, 0.506rem + 0.23vw, 0.95rem);
        --fs-eyebrow: clamp(0.6875rem, 0.448rem + 0.18vw, 0.8rem);

        --section-y:    clamp(5.75rem, 3.9rem + 1.7vw, 7rem);
        --section-y-sm: clamp(3.75rem, 2.6rem + 1.05vw, 4.6rem);
        --gutter:       clamp(3rem, 2.6vw - 0.461rem, 5.5rem);
    }
}