/* ============================================================
   PERCEI · DESIGN TOKENS
   colors_and_type.css
   Blue Porcelain v3.0 — cobalt on porcelain white
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

/* Jost — local brand font (variable) */
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Jost-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Jost-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  font-synthesis: style;
}

/* Sora — local brand font (variable, weight axis 100–800, italic via font-style) */
@font-face {
  font-family: 'Sora';
  src: url('fonts/Sora-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('fonts/Sora-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
  font-synthesis: style;
}

:root {
  /* ── Porcelain ground ── */
  --porcelain:     #F8FAFE;
  --white:         #FFFFFF;

  /* ── True Cobalt — primary accent ── */
  --cobalt-900:    #003580;
  --cobalt-800:    #003D99;
  --cobalt:        #0047AB;
  --cobalt-bright: #0060D6;
  --cobalt-500:    #3D7FCC;
  --cobalt-400:    #6FA3E0;
  --cobalt-300:    #A8C8F0;
  --cobalt-200:    #D1E3F8;
  --cobalt-100:    #E8F1FC;
  --cobalt-050:    #F2F7FD;

  /* ── Seal — terracotta (印章) — the ONLY warm element ── */
  --seal:          #8B5E3C;
  --seal-light:    #C8845A;
  --seal-300:      #D4A574;
  --seal-100:      #F5E6D8;

  /* ── Slate neutrals ── */
  --slate-900:     #0F172A;
  --slate-800:     #1E293B;
  --slate-700:     #334155;
  --slate-600:     #475569;
  --slate-500:     #64748B;
  --slate-400:     #94A3B8;
  --slate-300:     #CBD5E1;
  --slate-200:     #E2E8F0;
  --slate-100:     #F1F5F9;
  --slate-050:     #F8FAFC;

  /* ── Ink — inverse sections ── */
  --ink:           #0F172A;

  /* ── Status ── */
  --positive:      #166534;
  --warning:       #92400E;
  --critical:      #991B1B;

  /* ---------- SEMANTIC ---------- */
  --bg:            var(--porcelain);
  --bg-lift:       var(--white);
  --bg-inverse:    var(--ink);

  --surface:       var(--white);
  --surface-2:     var(--slate-100);

  --fg:            var(--slate-800);
  --fg-1:          var(--slate-900);
  --fg-2:          var(--slate-600);
  --fg-3:          var(--slate-400);
  --fg-4:          var(--slate-300);
  --fg-inverse:    var(--slate-100);

  --line:          var(--slate-200);
  --line-strong:   var(--slate-300);
  --line-soft:     var(--slate-100);

  --accent:        var(--cobalt);
  --accent-hover:  var(--cobalt-bright);
  --accent-soft:   var(--cobalt-100);
  --accent-bg:     var(--cobalt-050);

  --warm:          var(--seal);
  --warm-soft:     var(--seal-100);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--cobalt-500);

  /* ---------- TYPE · FAMILIES ---------- */
  --font-display: 'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --font-prose:   'Sora', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-quote:   'Sora', Georgia, serif;

  /* ---------- TYPE · SCALE ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-88: 5.5rem;

  /* Line height */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.5;
  --lh-prose: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.02em;
  --tracking-label: 0.18em;
  --tracking-eyebrow: 0.32em;

  /* Weights */
  --w-thin: 200;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* ---------- SPACING ---------- */
  --s-0: 0;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---------- RADIUS ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-5: 14px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-0: 0 0 0 1px var(--line-soft);
  --shadow-1: 0 1px 0 var(--line-soft), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 1px 0 var(--line), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-3: 0 1px 0 var(--line), 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-on-dark: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 0.8, 0.4);
  --dur: 700ms;
  --dur-fast: 400ms;
  --dur-instant: 80ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-deliberate: 720ms;
}

/* ============================================================
   SEMANTIC ELEMENT RULES
   ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  letter-spacing: var(--tracking-base);
}

.display-hero,
h1.hero {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--fs-88);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--s-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-38);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-2);
}

h6, .h6 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 var(--s-2);
}

.tagline,
blockquote.tagline,
.quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: var(--w-thin);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  letter-spacing: var(--tracking-base);
}

p {
  margin: 0 0 var(--s-4);
  max-width: 68ch;
}

.lede {
  font-size: var(--fs-18);
  line-height: var(--lh-prose);
  color: var(--fg-2);
  font-weight: var(--w-light);
  max-width: 60ch;
}

small, .meta {
  font-size: var(--fs-13);
  color: var(--fg-3);
}

.eyebrow,
.label-micro {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

.label {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-2);
}

code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--w-regular);
  background: var(--slate-100);
  padding: 0.1em 0.4em;
  border-radius: var(--r-2);
  color: var(--fg-1);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  background: var(--ink);
  color: var(--slate-100);
  padding: var(--s-4);
  border-radius: var(--r-3);
  overflow-x: auto;
}

pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--slate-300);
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent);
}

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

::selection {
  background: var(--cobalt-100);
  color: var(--slate-900);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-transform: lowercase;
}