/* cargo.one design tokens. Source of truth is the product SCSS — re-export when it drifts. */
:root {
  /* Brand */
  --c1-brand-primary: #E70A3E;
  --c1-brand-primary-light: #889BBC;
  --c1-brand-danger: #E70A3E;
  --c1-brand-dark-danger: #A90008;
  --c1-brand-success: #719B30;
  --c1-brand-success-light: #ABD669;
  --c1-brand-info: #1C6EF2;
  --c1-brand-warning: #F1AC32;
  --c1-brand-neutral: #5C2BC5;
  --c1-brand-navbar: #4C557E;

  /* Gunmetal scale (neutrals) */
  --c1-gunmetal: #262C36;
  --c1-gunmetal-l10: #37455D;
  --c1-gunmetal-l20: #4A5C7D;
  --c1-gunmetal-l30: #63738D;
  --c1-gunmetal-l40: #818FA7;
  --c1-gunmetal-l50: #9FAABC;
  --c1-gunmetal-l60: #BDC5D1;
  --c1-gunmetal-l70: #DBDFE6;
  --c1-gunmetal-l80: #EAECF0;
  --c1-gunmetal-l90: #F9FAFB;

  /* Blue crayola */
  --c1-blue-d30: #041A3E;
  --c1-blue-d20: #083887;
  --c1-blue-d10: #0A4DB7;
  --c1-blue: #1C6EF2;
  --c1-blue-l10: #347DF3;
  --c1-blue-l20: #649CF6;
  --c1-blue-l30: #ADCAFA;
  --c1-blue-l40: #D3E3FC;
  --c1-blue-l50: #E6EFFD;
  --c1-blue-l60: #F5FAFF;

  /* Space cadet */
  --c1-cadet: #1B2145;
  --c1-cadet-l10: #323758;
  --c1-cadet-l20: #4B527A;
  --c1-cadet-l30: #646B94;
  --c1-cadet-l60: #CED2E0;
  --c1-cadet-l70: #F1F3F9;
  --c1-cadet-l80: #F8F9FC;

  /* Metallic seaweed */
  --c1-seaweed: #15808C;
  --c1-seaweed-d10: #0E5760;
  --c1-seaweed-l60: #DAF6F9;

  /* Red */
  --c1-red-d20: #850624;
  --c1-red-d10: #B60831;
  --c1-red: #E70A3E;
  --c1-red-l20: #F85F83;
  --c1-red-l40: #FCC1CF;
  --c1-red-l50: #FEF2F5;

  /* Amber */
  --c1-amber-d20: #7B4200;
  --c1-amber-d10: #AE5D00;
  --c1-amber: #E17800;
  --c1-amber-l10: #FF9215;
  --c1-amber-l30: #FFC17B;
  --c1-amber-l40: #FFE0BD;
  --c1-amber-l50: #FFF1E1;
  --c1-amber-l60: #FFE0BD;

  /* Green */
  --c1-green-d10: #3C5516;
  --c1-green: #597E20;
  --c1-green-l10: #76A72A;
  --c1-green-l50: #D5EBB2;
  --c1-green-l60: #EBF6DA;

  /* Royal purple */
  --c1-purple: #703ABD;
  --c1-purple-d10: #592E96;
  --c1-purple-l40: #C3ABE5;
  --c1-purple-l50: #E4DAF3;
  --c1-purple-l60: #F3ECFC;
  --c1-purple-badge-bg: #EEE2FE;

  /* Lavender — Pro / premium / beta-positive (lighter than purple) */
  --c1-lavender-d20: #5A2F9B;
  --c1-lavender-d10: #7E55CC;
  --c1-lavender:     #9C7AD9;
  --c1-lavender-l10: #AE92E0;
  --c1-lavender-l20: #BFA9E6;
  --c1-lavender-l40: #DBCEF0;
  --c1-lavender-l50: #ECE3F8;
  --c1-lavender-l60: #F4EFFB;

  /* Coral — warm signal accent */
  --c1-coral-d20: #A93023;
  --c1-coral-d10: #D14334;
  --c1-coral:     #EF6051;
  --c1-coral-l10: #F38478;
  --c1-coral-l20: #F6A095;
  --c1-coral-l40: #FBCDC6;
  --c1-coral-l50: #FEEEEB;
  --c1-coral-l60: #FEF7F5;

  /* Gold — premium / data-richness accent */
  --c1-gold-d20: #7E4F11;
  --c1-gold-d10: #A86A18;
  --c1-gold:     #DA8C35;
  --c1-gold-l10: #E29F5A;
  --c1-gold-l20: #E9B27D;
  --c1-gold-l40: #F4D6B5;
  --c1-gold-l50: #FAE9D2;
  --c1-gold-l60: #FCF4E8;

  /* Pace + Sunset gradients — hero / banner system.
     Navy carries the surface; gold→rose→red carries the highlight strip.
     `.banner-pace` requires the sunset strip — that's what makes it pace. */
  --c1-gradient-pace:            linear-gradient(106deg, #171C49 20%, #AC1042 100%);
  --c1-gradient-pace-diagonal:   linear-gradient(135deg, #171C49 0%,  #AC1042 100%);
  --c1-gradient-sunset:          linear-gradient(90deg,  #E3A25A 0%, #C1426C 50%, #E70A3E 100%);
  --c1-gradient-sunset-diagonal: linear-gradient(135deg, #E3A25A 0%, #C1426C 50%, #E70A3E 100%);
  --c1-gradient-sunset-vertical: linear-gradient(180deg, #E3A25A 0%, #C1426C 50%, #E70A3E 100%);

  /* Surfaces */
  --c1-white: #FFFFFF;
  --c1-body-bg: #FAFBFC;
  --c1-body-color: #1D2637;
  --c1-navbar-bg: #1B2145;
  --c1-offer-bg: #F2F6FB;
  --c1-section-active-bg: #F3F7FE;
  --c1-card-border: #DBDFE6;
  --c1-warning-bg: #FFFBF6;
  --c1-shadow: #BCBFD6;

  /* Gradients */
  --c1-pro-gradient: linear-gradient(223deg, #1C6EF2 0%, #E70A3E 100%);
  --c1-pro-gradient-reverse: linear-gradient(303deg, #1C6EF2 0%, #E70A3E 100%);
  --c1-purple-gradient: linear-gradient(327.77deg, #2F396B 10.99%, #1B2145 45.79%);
  --c1-sponsored: linear-gradient(52deg, #0E1124 11.61%, #19284E 32.13%, #222F5A 52.22%, #403266 74.02%, #6A295D 87.27%);
  --c1-navbar-gradient: linear-gradient(180deg, #1B2145 15%, #2F3F8C 100%);
  --c1-navbar-gradient-horizontal: linear-gradient(135deg, #1B2145 0%, #2F3F8C 100%);

  /* Navbar palette */
  --c1-nav-bg: #1B2145;
  --c1-nav-bg-hover: #2F3F8C;
  --c1-nav-text: #B3B3B3;
  --c1-nav-text-active: #FFFFFF;
  --c1-nav-divider: rgba(255,255,255,0.22);
  --c1-nav-active-bg: rgba(255,255,255,0.15);
  --c1-nav-hover-bg: rgba(255,255,255,0.10);
  --c1-nav-accent: #1C6EF2;

  /* Typography — Proxima Nova is the house standard (self-hosted, see fonts.css);
     the system stack is only a fallback while the woff loads / if it 404s. */
  --c1-font-base: 'Proxima Nova', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --c1-font-mono: 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --c1-fs-xxs: 8px;
  --c1-fs-xs: 12px;
  --c1-fs-sm: 14px;
  --c1-fs-base: 16px;
  --c1-fs-lg: 18px;
  --c1-fs-xl: 20px;
  --c1-fs-xxl: 24px;
  --c1-fs-h4: 18px;
  --c1-fs-h3: 24px;
  --c1-fs-h2: 32px;
  --c1-fs-h1: 40px;
  --c1-fw-light: 300;
  --c1-fw-normal: 400;
  --c1-fw-medium: 500;
  --c1-fw-semi: 600;
  --c1-fw-bold: 700;
  --c1-lh-tight: 1.2;
  --c1-lh-base: 1.3;
  --c1-lh-loose: 1.75;

  /* Radii */
  --c1-radius-sm: 3px;
  --c1-radius: 4px;
  --c1-radius-lg: 8px;
  --c1-radius-xl: 12px;
  --c1-radius-2xl: 20px;
  --c1-radius-pill: 10rem;

  /* Shadows */
  --c1-shadow-sm: 0 2px 4px rgba(188, 191, 214, .20);
  --c1-shadow-card: 0 2px 4px rgba(206, 212, 222, .24);
  --c1-shadow-md: 0 8px 16px rgba(188, 191, 214, .15);
  --c1-shadow-lg: 0 16px 48px rgba(188, 191, 214, .175);
  --c1-shadow-darker: 0 10px 20px rgba(38, 44, 54, .08), 0 2px 8px rgba(38, 44, 54, .08);
  --c1-shadow-dropdown: 0 3px 25px 0 rgba(161, 164, 185, .3);

  /* Spacing (rem, derived from $spacer=1rem) */
  --c1-s1: 0.25rem;   /*  4px */
  --c1-s2: 0.5rem;    /*  8px */
  --c1-s3: 1rem;      /* 16px */
  --c1-s4: 1.5rem;    /* 24px */
  --c1-s5: 2rem;      /* 32px */
  --c1-s6: 2.5rem;    /* 40px */
  --c1-s7: 4rem;      /* 64px */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--c1-font-base);
  font-size: var(--c1-fs-base);
  line-height: var(--c1-lh-base);
  color: var(--c1-body-color);
  background: var(--c1-body-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c1-blue); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--c1-font-mono);
  font-size: 12px;
  background: var(--c1-gunmetal-l90);
  border: 1px solid var(--c1-gunmetal-l80);
  padding: 1px 6px;
  border-radius: var(--c1-radius-lg);
  color: var(--c1-gunmetal-l10);
}