/* ================================================================
   Exportdesk — Colors & Type Foundations (brand system 2026-06)
   ----------------------------------------------------------------
   Token source for the main public site. Built from the
   exportdesk-design brand bundle: cobalt is the only structural
   brand color, coral is the full-stop accent (max one per view),
   neutrals are the cool slate "ink" ramp on paper white.

   This file keeps the semantic token names that styles.css
   consumes. The legacy unpackai palette lives untouched in
   colors_and_type.css for client sites and old prototypes.
   ================================================================ */

/* ---------- FONTS ----------------------------------------------- */
/* Manrope is the single brand typeface (self-hosted, China-safe —
   no Google Fonts runtime dependency). Latin + Cyrillic coverage
   verified. Chinese text pairs with self-hosted Noto Sans SC. */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope/manrope_400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope/manrope_500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope/manrope_600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope/manrope_700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/noto-sans-sc/noto-sans-sc-chinese-simplified-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/noto-sans-sc/noto-sans-sc-chinese-simplified-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/noto-sans-sc/noto-sans-sc-chinese-simplified-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/noto-sans-sc/noto-sans-sc-chinese-simplified-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLORS — brand core -------------------------------- */
  --blue-primary: #2f4fd0;     /* cobalt — the only structural brand color */
  --cobalt-press: #2640ae;     /* pressed cobalt */
  --coral-primary: #ff6b5e;    /* the full-stop dot — accent only */
  --coral-ink: #c03a2e;        /* chop red — checkpoint/approval label text */
  --ink: #1a2233;              /* ink-900 — strong text, dark surfaces */
  --white: #ffffff;            /* paper */

  /* ---------- COLORS — cobalt tints ------------------------------ */
  --blue-100: #eef2fe;         /* cobalt-50 — soft fills, chips, quiet panels */
  --blue-200: #bac9f6;         /* cobalt-200 — soft borders, bars, light-on-dark */
  --blue-500: #2f4fd0;         /* mid slot resolves to structural cobalt */
  --blue-700: #2f4fd0;         /* alias of primary for scale completeness */

  /* ---------- COLORS — coral tints (small surfaces only) --------- */
  --coral-100: #fff0ee;        /* coral-50 — human-moment fills */
  --coral-200: #ffded9;        /* coral-100 — human-moment borders */
  --coral-400: #ff8a80;        /* light coral — icons on dark surfaces */
  --coral-600: #ff6b5e;        /* alias of primary coral */

  /* ---------- COLORS — ink ramp (cool slate neutrals) ------------ */
  --grey-50:  #f5f7fa;         /* ink-50 — page tint */
  --grey-100: #e2e7ee;         /* ink-150 — subtle borders, dividers */
  --grey-300: #aeb9c9;         /* ink-300 — muted icons, inactive controls */
  --grey-500: #5e6e86;         /* ink-500 — muted text */
  --grey-700: #46556b;         /* ink-600 — secondary text */
  --grey-900: #1a2233;         /* alias of ink */

  /* ---------- SEMANTIC COLOR TOKENS ------------------------------ */
  --bg:           var(--white);
  --bg-quiet:     var(--grey-50);      /* faint slate page tint — quiet sections */
  --bg-neutral:   var(--grey-50);
  --bg-dark:      var(--ink);

  --fg:           #222e3f;             /* ink-800 — body text */
  --fg-muted:     var(--grey-500);     /* secondary text, captions */
  --fg-quiet:     #8493a8;             /* ink-400 — tertiary / placeholder */
  --fg-on-dark:   var(--white);
  --fg-on-brand:  var(--white);

  --border:       var(--grey-100);     /* hairline divider / outline */
  --border-strong:#d3dae4;             /* ink-200 — inputs, secondary buttons */
  --border-focus: var(--blue-primary);

  --link:         var(--blue-primary);
  --link-hover:   #2a48c0;             /* cobalt-hover */

  --action:       var(--blue-primary); /* primary CTA fill */
  --action-fg:    var(--white);
  --accent:       var(--coral-primary);/* human-action moments */
  --accent-soft:  var(--coral-100);

  /* Status — muted and professional */
  --status-ok:      #1f8f6a;
  --status-ok-text: #0e5c43;
  --status-warn:    #b5780c;
  --status-info:    var(--blue-primary);
  --status-muted:   var(--grey-300);

  /* ---------- TYPE — families ------------------------------------ */
  --font-sans:    'Manrope', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
                  'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas,
                  'Liberation Mono', monospace;
  --font-display: 'Manrope', 'Noto Sans SC', -apple-system, sans-serif;

  /* ---------- TYPE — scale (px, base = 16) ----------------------- */
  --fs-xs:   12px;             /* metadata, mono labels */
  --fs-sm:   14px;             /* captions, dense UI */
  --fs-base: 16px;             /* body */
  --fs-md:   18px;             /* lead body */
  --fs-lg:   20px;             /* h4 / section header */
  --fs-xl:   24px;             /* h3 */
  --fs-2xl:  32px;             /* h2 */
  --fs-3xl:  44px;             /* h1 */
  --fs-4xl:  60px;             /* display */
  --fs-5xl:  72px;             /* display XL */

  --lh-tight:   1.07;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-tight:  -0.016em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.08em;   /* uppercase eyebrows / operational labels */

  /* ---------- SPACING (strict 4px grid) -------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII — squircle-adjacent, echoing the seal -------- */
  --radius-xs: 4px;            /* tiny chips, status pips */
  --radius-sm: 6px;            /* small tiles, focus rounding */
  --radius-md: 10px;           /* inputs, buttons */
  --radius-lg: 14px;           /* cards, panels */
  --radius-xl: 20px;           /* hero / feature surfaces */
  --radius-pill: 999px;        /* tags, avatars, switches only */

  /* ---------- ELEVATION / SHADOWS — soft, cool, no glows --------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26, 34, 51, 0.05),
              0 0 0 1px rgba(26, 34, 51, 0.04);
  --shadow-2: 0 2px 8px rgba(26, 34, 51, 0.07),
              0 0 0 1px rgba(26, 34, 51, 0.05);
  --shadow-3: 0 10px 28px rgba(26, 34, 51, 0.10),
              0 0 0 1px rgba(26, 34, 51, 0.05);
  /* Focus ring — 3px cobalt, always visible */
  --ring: 0 0 0 3px rgba(47, 79, 208, 0.32);

  /* ---------- MOTION — calm and short ---------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;

  /* ---------- CONTAINER ------------------------------------------ */
  --container: 1200px;
  --container-narrow: 880px;
}

/* ================================================================
   ELEMENT DEFAULTS
   ================================================================ */
html { color-scheme: light; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Manrope SemiBold/Bold with tight negative tracking */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.022em; font-weight: 700; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.018em; font-weight: 700; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
  margin: 0;
  text-wrap: pretty;
  max-width: 65ch;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

::selection { background: #dde5fc; color: var(--ink); }