/* ============================================================
   BASE — Perk-inspired light theme primitives
   ============================================================ */

/* Tokens */
:root{
  /* Brand */
  --color-lime:           #3AA5D2;  /* primary brand (blue) */
  --color-lime-deep:      #2589B5;
  --color-lime-soft:      #5DBCDF;
  --color-lime-faint:     #D8EEF8;
  --color-sage:           #3AA5D2;  /* alias → brand (legacy refs) */
  --color-sage-deep:      #2589B5;
  --color-stone:          #EFEEE9;  /* warm light stone neutral */
  --color-stone-2:        #E5E3DC;
  --color-graphite:       #1A1A1D;  /* deep charcoal */
  --color-graphite-2:     #26262A;
  --color-ink:            #0E0E10;  /* near-black */
  --color-ink-soft:       #1E1E22;
  --color-charcoal:       #333333;
  --color-grey:           #6B6B72;
  --color-grey-faint:     #9A9AA1;
  --color-line:           #E5E5E7;
  --color-line-strong:    #D4D4D6;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F7F7F5;  /* warm off-white */
  --color-surface-dark:   #0E0E10;

  /* Semantic */
  --color-bg:             var(--color-surface);
  --color-text:           var(--color-ink);
  --color-text-muted:     var(--color-charcoal);
  --color-text-faint:     var(--color-grey);
  --color-border:         var(--color-line);
  --color-accent:         var(--color-lime);
  --accent-rgb:           58,165,210;

  /* Typography */
  --font-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter Tight', 'Helvetica Neue', Helvetica, Arial, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-3xs: .6875rem;   /* 11px */
  --text-2xs: .75rem;     /* 12px */
  --text-xs:  .8125rem;   /* 13px */
  --text-sm:  .9375rem;   /* 15px */
  --text-base:1.0625rem;  /* 17px */
  --text-md:  1.25rem;    /* 20px */
  --text-lg:  1.625rem;   /* 26px */
  --text-xl:  2.25rem;    /* 36px */
  --text-2xl: 3rem;       /* 48px */
  --text-3xl: 4rem;       /* 64px */
  --text-hero:clamp(2.6rem, 6.2vw, 5.5rem);
  --text-mega:clamp(5rem, 14vw, 16rem); /* footer marquee */

  /* Spacing */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem;
  --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem;

  /* Radii */
  --radius-pill: 9999px;
  --radius-card: 20px;
  --radius-md: 12px;

  /* Motion */
  /* Buttery easing system
     - --ease: default, slightly more relaxed than stock material curve
     - --ease-out: a deep ease-out for entrances / page-level motion (Apple-feel)
     - --ease-soft: gentle for hovers / micro-interactions
     - --ease-spring: snappy out for confident card lifts */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.33,.0,.0,1);
  --ease-spring: cubic-bezier(.34,1.34,.64,1);

  /* Layout */
  --wrap: 1280px;
  --nav-h: 72px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:none;text-size-adjust:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  min-height:100dvh;
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;letter-spacing:-.005em;
  color:var(--color-text);background:var(--color-bg);
  overflow-x:hidden;
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
ul[role='list'],ol[role='list']{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
a{color:inherit;text-decoration:none}
::selection{background:var(--color-lime);color:var(--color-ink)}
:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}
button{cursor:pointer;background:none;border:none;color:inherit}
table{border-collapse:collapse;width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}