/* Electric Blue Design System — token layer (concatenated, brand-recolored in site.css) */

/* ---- tokens/fonts.css ---- */
/* Forma DJR Micro is proprietary (Commercial Type / Mark Caneso).
   Manrope is the spec-recommended closest substitute — used directly, no metric adjustment.
   Swap these @font-face rules for the real Forma DJR Micro binaries when available. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Manrope', 'Forma DJR Micro', Arial, system-ui, sans-serif;
}

/* ---- tokens/colors.css ---- */
:root {
  /* ---- Brand & Accent ---- */
  --color-primary: #024ad8;        /* Electric Blue — lone signal / CTA / link / chevron */
  --color-primary-bright: #296ef9; /* lighter variant used inside dark slabs */
  --color-primary-deep: #0e3191;   /* pressed CTA / visited link */
  --color-primary-soft: #c9e0fc;   /* pale surface, selection chips */
  --color-on-primary: #ffffff;

  /* ---- Ink / Text ---- */
  --color-ink: #1a1a1a;            /* universal text on white */
  --color-ink-deep: #000000;       /* wordmark, 1px hairlines */
  --color-ink-soft: #292929;       /* textural shift inside dark slabs */
  --color-on-ink: #ffffff;
  --color-charcoal: #3d3d3d;       /* secondary body / disclaimers */
  --color-graphite: #636363;       /* legal lines, metadata */

  /* ---- Surface ---- */
  --color-canvas: #ffffff;         /* universal page bg */
  --color-paper: #ffffff;          /* card surface */
  --color-cloud: #f7f7f7;          /* lightest gray band */
  --color-fog: #e8e8e8;            /* darker gray band */
  --color-steel: #c2c2c2;          /* stronger hairline / focus */
  --color-hairline: #e8e8e8;
  --color-hairline-strong: #c2c2c2;

  /* ---- Accent families (scarce) ---- */
  --color-bloom-coral: #ff5050;    /* sale-tag chip */
  --color-bloom-rose: #f9d4d2;     /* soft pink lifestyle accent */
  --color-bloom-deep: #b3262b;     /* error / discount emphasis */
  --color-bloom-wine: #5a1313;
  --color-storm-mist: #8ebdce;     /* printer-plan illustration */
  --color-storm-sea: #7fadbe;
  --color-storm-deep: #356373;     /* neutral status accent */

  /* ---- Semantic ---- */
  --color-link: #024ad8;
  --color-link-pressed: #0e3191;
  --color-error: #b3262b;

  /* ---- Semantic surface aliases ---- */
  --surface-page: var(--color-canvas);
  --surface-card: var(--color-paper);
  --surface-band-1: var(--color-cloud);
  --surface-band-2: var(--color-fog);
  --surface-slab: var(--color-ink);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-charcoal);
  --text-muted: var(--color-graphite);
  --text-on-slab: var(--color-on-ink);
}

/* ---- tokens/typography.css ---- */
:root {
  --font-sans: 'Manrope', 'Forma DJR Micro', Arial, system-ui, sans-serif;

  /* weights */
  --fw-regular: 400;   /* @kind other */
  --fw-medium: 500;    /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold: 700;      /* @kind other */

  /* Display — always weight 500, line-height 1.0 (resist bumping weight at hero scale) */
  --type-display-xxl: 500 72px/1.0 var(--font-sans);
  --type-display-xl:  500 56px/1.0 var(--font-sans);
  --type-display-lg:  500 44px/1.0 var(--font-sans);
  --type-display-md:  500 32px/1.0 var(--font-sans);
  --type-display-sm:  500 24px/1.17 var(--font-sans);
  --type-display-xs:  500 20px/1.0 var(--font-sans);

  /* Body */
  --type-body-lg:       400 18px/1.33 var(--font-sans);
  --type-body-md:       400 16px/1.38 var(--font-sans);
  --type-body-emphasis: 500 16px/1.38 var(--font-sans);

  /* Caption */
  --type-caption-md:   400 14px/1.5 var(--font-sans);
  --type-caption-sm:   400 12px/1.33 var(--font-sans);
  --type-caption-bold: 700 14px/1.3 var(--font-sans);

  /* Link */
  --type-link-md: 500 16px/1.38 var(--font-sans);

  /* Buttons — the only place the system tracks letters */
  --type-button-md: 600 14px/1.4 var(--font-sans);
  --type-button-md-tracking: 0.7px;
  --type-button-sm: 700 12.6px/1.0 var(--font-sans);
  --type-button-sm-tracking: 0.126px;

  /* Price */
  --type-price-md: 500 24px/1.17 var(--font-sans);
}

/* ---- tokens/spacing.css ---- */
:root {
  /* 8px base unit, 4px half-step. Gentle scale. */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-section: 80px;   /* universal rhythm constant between major bands */

  --container-max: 1366px;
  --gutter: 24px;
}

/* ---- tokens/radius.css ---- */
:root {
  /* Two-tier philosophy: buttons stay sharp (md/4px), cards stay soft (xl/16px). */
  --radius-none: 0px;   /* chevron decorations, full-bleed heroes */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;     /* buttons, inputs */
  --radius-lg: 8px;     /* badge pills, category-icon cards, faq rows */
  --radius-xl: 16px;    /* product cards, pricing tiers, photo frames */
  --radius-pill: 9999px;
}

/* ---- tokens/elevation.css ---- */
:root {
  /* Mostly flat — depth via color contrast, not shadow.
     Soft Lift is the workhorse for catalog cards; nothing else. */
  --elevation-0: none;
  --elevation-1: 0 0 0 1px var(--color-hairline);            /* hairline */
  --elevation-2: 0 2px 8px rgba(26, 26, 26, 0.08);           /* soft lift — product/pricing cards */
  --elevation-3: 0 8px 24px rgba(26, 26, 26, 0.12);          /* floating modal — transient only */
}