/* ==========================================================================
   STACKD design tokens
   Generated by tokens/build-tokens.py · do not edit this file by hand.
   Every value matches the locked desktop design exactly.
   ========================================================================== */
:root{

  /* COLOUR */
  --color-bg:#080D14;                                           /* page ground */
  --color-bg-2:#0A1119;                                         /* alternate section ground */
  --color-surface:#0B1220;                                      /* card ground */
  --color-surface-2:#111A28;                                    /* raised control ground, inputs */
  --color-line:rgba(255,255,255,.08);                           /* default divider */
  --color-line-2:rgba(255,255,255,.16);                         /* stronger divider, control borders */
  --color-text:#F4F7FA;                                         /* primary copy and headings */
  --color-text-2:#C3CDD6;                                       /* secondary copy */
  --color-text-3:#8E9BAA;                                       /* muted copy, labels, captions */
  --color-on-accent:#041018;                                    /* ink on cyan or light accent fills */
  --color-cyan:#1FE0F5;                                         /* site accent: kickers, numerals, icons */
  --color-blue:#1478E8;                                         /* primary CTA fill */
  --color-blue-hover:#2F8BFF;                                   /* primary CTA hover fill */
  --color-blue-2:#4C7DFF;                                       /* secondary brand blue */
  --color-indigo:#2B39DD;                                       /* deep brand blue, gradients */
  --color-violet:#7C5CFF;                                       /* ramp midpoint */
  --color-violet-2:#B06AF2;                                     /* ramp end */
  --color-agent-pr:#4C7DFF;                                     /* PR Agent identity */
  --color-agent-sm:#B06AF2;                                     /* Social Media Agent identity */
  --color-ok:#34D399;                                           /* success, applied discount */
  --color-warn:#FBBF24;                                         /* warning */
  --color-err:#FF6B7A;                                          /* error, invalid input */
  --color-ok-ink:#04251A;                                       /* ink on the success chip */
  --color-ok-bright:#4AE3AA;                                    /* success chip fill */
  --color-err-soft:#FFD1D6;                                     /* error text on a tinted field */
  --color-ok-soft:#BFF5DF;                                      /* success text on a tinted field */
  --color-cta-top:#080D16;                                      /* closing section, top of ground */
  --color-cta-mid:#05080F;                                      /* closing section, middle of ground */
  --color-cta-base:#03050B;                                     /* closing section, foot of ground */
  --color-page-foot:#060A10;                                    /* page foot fade */
  --color-mock-ground:#0B1A2C;                                  /* device mock ground */
  --color-mock-bar:#2A2F3A;                                     /* device mock bar, start */
  --color-mock-bar-2:#3B4152;                                   /* device mock bar, end */
  --color-cal-ground:#0B1220;                                   /* week calendar card ground */
  --color-cal-card:#151E2D;                                     /* calendar item, social and neutral */
  --color-cal-card-pr:#10213A;                                  /* calendar item placed by the PR Agent */
  --color-cal-card-you:#0B2A2A;                                 /* calendar item that is yours */
  --color-cal-text:#DCE3EE;                                     /* calendar item title */
  --color-cal-time-pr:#7DB4F5;                                  /* time label on a PR item */
  --color-cal-time-you:#5EEAD4;                                 /* time label on your item */
  --color-cal-today:#62A0F2;                                    /* today's day label; PR dot on the phone strip */
  --color-cal-dot-sm:#A78BFA;                                   /* Social Media dot on the phone strip */
  --color-cal-dot-you:#2DD4BF;                                  /* your dot on the phone strip */
  --color-cal-ok:#4ADE80;                                       /* status text: Sent, Scheduled, Planned, Approved, Confirmed */
  --color-cal-ok-bg:rgba(34,197,94,.14);                        /* status chip ground */
  --color-cal-need:#FBBF24;                                     /* status text: Needs you */
  --color-cal-need-bg:rgba(245,158,11,.16);                     /* Needs you chip ground */
  --color-cal-need-bar:#F59E0B;                                 /* 3px bar on an item that waits on you */
  --color-cal-ring:#22D3EE;                                     /* the ring when you approve an item */
  --color-cursor-pr:#1478E8;                                    /* PR Agent cursor arrow */
  --color-cursor-sm:#7645EE;                                    /* Social Media Agent cursor arrow */
  --color-cursor-you:#0891B2;                                   /* your cursor arrow */
  --color-linkedin:#0A66C2;                                     /* LinkedIn brand blue */
  --color-x:#0F1419;                                            /* X brand black */
  --color-youtube:#FF0033;                                      /* YouTube brand red */
  --color-ig-1:#F58529;                                         /* Instagram gradient stop 1 */
  --color-ig-2:#DD2A7B;                                         /* Instagram gradient stop 2 */
  --color-ig-3:#8134AF;                                         /* Instagram gradient stop 3 */
  --color-print-text:#1a1a1a;                                   /* body copy in the print stylesheet */
  --color-print-muted:#555;                                     /* secondary copy in the print stylesheet */
  --color-print-line:#ccc;                                      /* rules in the print stylesheet */
  --color-white:#fff;                                           /* pure white · button labels, mock screens */
  --color-black:#000;                                           /* pure black */

  /* GRADIENT */
  --gradient-agent-pr:linear-gradient(135deg,#1478E8,#2B39DD);  /* PR Agent name pill (calendar cursor) */
  --gradient-agent-sm:linear-gradient(135deg,#7645EE,#5B2BD6);  /* Social Media Agent name pill (calendar cursor) */
  --gradient-agent-you:linear-gradient(135deg,#14B8A6,#0E7490); /* your name pill (calendar cursor) */
  --gradient-avatar-you:linear-gradient(135deg,#2DD4BF,#0F766E);/* your avatar disc (switch, pills, items) */
  --gradient-avatar-pr:linear-gradient(135deg,#3E7BE0,#2B39DD); /* ground behind the PR Agent avatar */
  --gradient-avatar-sm:linear-gradient(135deg,#8B5CF6,#6D28D9); /* ground behind the Social Media Agent avatar */
  --gradient-brand-ramp:linear-gradient(100deg,#1FE0F5 0%,#4C7DFF 36%,#7C5CFF 66%,#B06AF2 100%);/* the signature ramp · hero line, closing line, PR+Social label */
  --gradient-agent-pair:linear-gradient(90deg,#4C7DFF 0%,#B06AF2 100%);/* PR blue to Social purple, for the combined label */
  --gradient-cta:linear-gradient(135deg,#2F3DE0 0%,#1674E6 62%,#1A8CEB 100%);/* primary button fill · the platform's Create button (27 Sept) */
  --gradient-text-flow:linear-gradient(to right,#1FE0F5 0%,#4C7DFF 25%,#7C5CFF 50%,#B06AF2 75%,#1FE0F5 100%);/* closing line, animated · the brand ramp's four colors evenly spaced, first repeated so the loop is seamless, drawn 300% wide (27 Sept) */
  --gradient-cta-flow:linear-gradient(90deg,#1478E8 0%,#7C5CFF 50%,#1478E8 100%);/* Full Stack button only · one seamless tile, drawn 200% wide and slid by a full tile (27 Sept) */

  /* FONT FAMILY */
  --font-sans:'Archivo',system-ui,sans-serif;                   /* everything */
  --font-mono:'Archivo',system-ui,sans-serif;                   /* kickers, numerals, labels · same face, tracked out */

  /* FONT SIZE */
  --fs-3xs:10px;
  --fs-2xs:10.5px;
  --fs-xs:11px;
  --fs-xs-2:11.5px;
  --fs-sm:12px;
  --fs-sm-2:12.5px;
  --fs-base:13px;
  --fs-base-2:13.5px;
  --fs-md:14px;
  --fs-md-2:14.5px;
  --fs-lg:15px;
  --fs-lg-2:15.5px;
  --fs-xl:16px;
  --fs-xl-2:16.5px;
  --fs-2xl:17px;
  --fs-3xl:19px;
  --fs-4xl:21px;
  --fs-5xl:26px;
  --fs-6xl:30px;
  --fs-7xl:46px;
  --fs-s9:9px;
  --fs-s9-5:9.5px;
  --fs-s18:18px;
  --fs-s20:20px;
  --fs-s22:22px;
  --fs-s24:24px;
  --fs-s25:25px;
  --fs-s32:32px;
  --fs-s40:40px;

  /* FONT SIZE · fluid display */
  --fs-display-xs:clamp(22px,2.1vw,30px);
  --fs-display-sm:clamp(24px,2.4vw,32px);
  --fs-display-sm-p:clamp(24px,7vw,32px);
  --fs-display-md:clamp(28px,3.3vw,48px);
  --fs-display-md-p:clamp(30px,8.5vw,44px);
  --fs-display-lg:clamp(34px,4.4vw,60px);
  --fs-display-lg-p:clamp(34px,9.5vw,52px);
  --fs-display-xl:clamp(36px,4.4vw,62px);
  --fs-display-xl2:clamp(36px,4.8vw,68px);
  --fs-display-2xl:clamp(36px,5.6vw,84px);
  --fs-display-3xl:clamp(40px,6.4vw,92px);
  --fs-display-4xl:clamp(44px,5.6vw,88px);
  --fs-display-5xl:clamp(46px,7.4vw,108px);

  /* FONT WEIGHT */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  /* LINE HEIGHT */
  --lh-none:1;
  --lh-flat:.96;
  --lh-tight:1.05;
  --lh-snug:1.1;
  --lh-heading:1.15;
  --lh-display:1.2;
  --lh-normal:1.35;
  --lh-relaxed:1.5;
  --lh-body:1.55;
  --lh-loose:1.65;
  --lh-prose:1.7;

  /* LETTER SPACING */
  --ls-display:-.045em;
  --ls-tighter:-.04em;
  --ls-tight:-.035em;
  --ls-snug:-.03em;
  --ls-normal:-.02em;
  --ls-flat:-.01em;
  --ls-none:0;
  --ls-wide:.04em;
  --ls-wider:.06em;
  --ls-widest:.08em;
  --ls-label:.1em;
  --ls-kicker:.12em;
  --ls-mono:.14em;

  /* SPACE */
  --space-0:0;
  --space-px:1px;
  --space-0-5:2px;
  --space-1:4px;
  --space-1-5:6px;
  --space-2:8px;
  --space-2-5:10px;
  --space-3:12px;
  --space-3-5:14px;
  --space-4:16px;
  --space-4-5:18px;
  --space-5:20px;
  --space-5-5:22px;
  --space-6:24px;
  --space-6-5:26px;
  --space-7:28px;
  --space-7-5:30px;
  --space-8:32px;
  --space-9:36px;
  --space-10:40px;
  --space-11:44px;
  --space-12:48px;
  --space-14:56px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-28:112px;
  --space-32:128px;
  --space-35:140px;
  --space-40:160px;

  /* RADIUS */
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-sm-2:5px;
  --radius-md:6px;
  --radius-md-2:8px;
  --radius-lg:12px;
  --radius-lg-2:14px;
  --radius-xl:16px;
  --radius-xl-2:18px;
  --radius-2xl:20px;
  --radius-2xl-2:22px;
  --radius-3xl:24px;
  --radius-3xl-2:26px;
  --radius-4xl:36px;
  --radius-pill:999px;
  --radius-full:50%;

  /* ELEVATION */
  --shadow-cta:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(17,40,120,.28),0 6px 16px -8px rgba(35,60,220,.7);/* primary button at rest · top highlight + indigo glow, as the platform */
  --shadow-cta-strong:0 8px 30px rgba(20,120,232,.45);          /* primary button, emphasised */
  --shadow-cta-hover:inset 0 1px 0 rgba(255,255,255,.26),0 1px 2px rgba(17,40,120,.3),0 10px 24px -8px rgba(35,60,220,.8);/* primary button hover */
  --shadow-ghost-hover:0 0 0 1px rgba(20,120,232,.25),0 10px 30px -12px rgba(20,120,232,.55);/* secondary button hover */
  --shadow-card:0 30px 80px -30px rgba(0,0,0,.8);               /* auth and checkout cards */
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.25),0 24px 60px rgba(0,0,0,.55);/* the nav pill and phone menu sheet */
  --shadow-mark:0 14px 34px -10px rgba(20,120,232,.8);          /* the confirmation tick disc */
  --shadow-glow-cyan:0 0 14px rgba(31,224,245,.55);             /* cyan halo on small accents */

  /* DURATION */
  --duration-instant:.15s;
  --duration-fast:.2s;
  --duration-quick:.25s;
  --duration-snappy:.28s;
  --duration-normal:.3s;
  --duration-slow:.4s;
  --duration-slower:.5s;
  --duration-reveal:.6s;
  --duration-fold:.9s;
  --duration-scene:1.6s;

  /* EASING */
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.2,1.5,.35,1);

  /* LAYOUT */
  --layout-container:min(1240px,100% - 48px);
  --layout-container-max:1240px;
  --layout-gutter:24px;
  --layout-nav-h:60px;
  --layout-rail:300px;
  --layout-measure:68ch;

  /* Z INDEX */
  --z-below:-1;
  --z-base:0;
  --z-raised:1;
  --z-above:2;
  --z-sticky:3;
  --z-scrim:70;
  --z-menu:72;
  --z-nav:80;
  --z-overlay:100;

  /* BREAKPOINT (reference only · CSS cannot use vars in media queries) */
  --bp-phone-xs:370px;                                          /* narrowest phone · tightest type and padding */
  --bp-phone-sm:430px;                                          /* phone */
  --bp-phone-lg:560px;                                          /* large phone */
  --bp-tablet-sm:620px;                                         /* small tablet / large phone landscape */
  --bp-tablet:700px;                                            /* tablet */
  --bp-nav-switch:900px;                                        /* phone nav below this, full nav above · pairs with 901px */
  --bp-nav-switch-2:920px;                                      /* second phone/desktop boundary · pairs with 921px */
  --bp-rail:1100px;                                             /* legal pages gain the sticky contents rail above this */
  --bp-wide:1180px;                                             /* wide desktop tuning */
  --bp-container:1240px;                                        /* container max width */

  /* ---- aliases kept so existing pages keep working ---- */
  --bg:var(--color-bg);
  --bg-2:var(--color-bg-2);
  --surface:var(--color-surface);
  --surface-2:var(--color-surface-2);
  --line:var(--color-line);
  --line-2:var(--color-line-2);
  --text:var(--color-text);
  --text-2:var(--color-text-2);
  --text-3:var(--color-text-3);
  --cyan:var(--color-cyan);
  --blue:var(--color-blue);
  --blue-hover:var(--color-blue-hover);
  --blue-2:var(--color-blue-2);
  --indigo:var(--color-indigo);
  --ok:var(--color-ok);
  --warn:var(--color-warn);
  --err:var(--color-err);
  --agent-pr:var(--color-agent-pr);
  --agent-sm:var(--color-agent-sm);
  --brand-ramp:var(--gradient-brand-ramp);
  --sans:var(--font-sans);
  --mono:var(--font-mono);
  --ease:var(--ease-standard);
  --container:var(--layout-container);
  --nav-h:var(--layout-nav-h);
}