/* Jubilee Cell LLC — design tokens
   Load first. In Bricks: Settings → Custom Code → CSS, or enqueue as a stylesheet. */

:root {
  /* Surfaces */
  --jc-white:      #FFFFFF;
  --jc-mist:       #F2F9FB;
  --jc-cyan-50:    #DBF2F9;
  --jc-cyan-200:   #A7E0F0;
  --jc-cyan:       #69CBE7;   /* brand cyan — FILL ONLY, never text or thin strokes */
  --jc-cyan-hover: #39BADF;   /* button hover fill */
  --jc-sand:       #F7EDE2;

  /* Text */
  --jc-petrol:     #0B2E38;   /* headings + primary text, and text on cyan fills */
  --jc-slate:      #3D5760;   /* body */
  --jc-deep-cyan:  #13647B;   /* links, eyebrows, small icons */
  --jc-muted:      #8FA5AD;   /* meta, SKUs, struck MSRP */

  /* Lines + accent */
  --jc-border:     #C9E6F0;   /* 1px, never grey */
  --jc-border-soft:#E3F1F6;
  --jc-coral:      #C24A36;   /* ~5% of page: one stat, active nav underline, quote mark, active pagination */

  /* Status */
  --jc-stock-in:   #2E9E6B;
  --jc-stock-low:  #C08A17;
  --jc-stock-out:  #8FA5AD;

  /* Dark footer */
  --jc-footer-bg:  #0B2E38;
  --jc-footer-head:#69CBE7;
  --jc-footer-link:#A7E0F0;

  /* Typography */
  --jc-font-display: 'Chakra Petch', system-ui, sans-serif;
  --jc-font-body:    'Inter', system-ui, sans-serif;
  --jc-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --jc-h1:        76px;
  --jc-h2:        46px;
  --jc-h3:        22px;
  --jc-stat:      46px;
  --jc-quote:     34px;
  --jc-body:      16px;
  --jc-small:     13px;
  --jc-eyebrow:   12px;

  --jc-tracking-tight:   -0.03em;
  --jc-tracking-heading: -0.025em;
  --jc-tracking-eyebrow: 0.15em;

  /* Depth — shadows are cyan-tinted, never grey */
  --jc-shadow-card:  0 12px 32px -8px rgba(11, 46, 56, 0.10);
  --jc-shadow-hover: 0 26px 52px -12px rgba(11, 46, 56, 0.22);
  --jc-shadow-photo: 0 24px 60px -16px rgba(11, 46, 56, 0.18);

  /* Geometry */
  --jc-radius-card:   12px;
  --jc-radius-button: 6px;
  --jc-radius-pill:   999px;
  --jc-section-pad:   120px;
  --jc-container:     1280px;
  --jc-gutter:        40px;

  /* Motion — see animations.md */
  --jc-ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --jc-dur-xs:  200ms;
  --jc-dur-sm:  260ms;
  --jc-dur-md:  300ms;
  --jc-dur-lg:  500ms;
  --jc-dur-xl:  600ms;
}

@media (max-width: 768px) {
  :root {
    --jc-h1: 42px;
    --jc-h2: 30px;
    --jc-quote: 23px;
    --jc-stat: 34px;
    --jc-section-pad: 64px;
    --jc-gutter: 24px;
  }
}