/* ============================================================
   Casual AI Labs — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand color ----------------------------------------- */
  --cal-teal: #0D9488;          /* primary */
  --cal-teal-dark: #0F766E;     /* hover / strong / section door */
  --cal-teal-darker: #115E59;   /* press */
  --cal-teal-tint: #CCFBF1;     /* surface tint, decorative circles */
  --cal-teal-tint-50: #F0FDFA;  /* subtle wash */

  --cal-coral: #F97316;         /* accent */
  --cal-coral-soft: #FFF1E6;    /* coral wash for badges (use sparingly) */

  /* --- Neutrals -------------------------------------------- */
  --cal-white: #FFFFFF;
  --cal-bg: #FFFFFF;
  --cal-bg-soft: #F8FAFC;
  --cal-line: #E2E8F0;
  --cal-line-strong: #CBD5E1;

  --cal-text: #1E293B;          /* charcoal — primary text */
  --cal-text-sub: #64748B;      /* slate — secondary text */
  --cal-text-muted: #94A3B8;    /* tertiary, captions */

  /* --- Semantic foreground / background -------------------- */
  --fg-1: var(--cal-text);
  --fg-2: var(--cal-text-sub);
  --fg-3: var(--cal-text-muted);
  --fg-on-teal: #FFFFFF;

  --bg-1: var(--cal-bg);
  --bg-2: var(--cal-bg-soft);
  --bg-tint: var(--cal-teal-tint);
  --bg-strong: var(--cal-teal-dark);

  --line-1: var(--cal-line);
  --line-2: var(--cal-line-strong);

  /* --- Status (kept restrained — brand prefers limited palette) */
  --status-success: #10B981;
  --status-warn: #F59E0B;
  --status-error: #EF4444;
  --status-info: var(--cal-teal);

  /* --- Type families --------------------------------------- */
  /* Trebuchet MS / Calibri / Consolas are platform fonts.
     We ship Google Fonts equivalents in fonts.css for portability. */
  --font-display: "Trebuchet MS", "Nunito", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Calibri", "Open Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "Consolas", "JetBrains Mono", ui-monospace, monospace;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* --- Type scale (rem-based; root = 16px) ------------------ */
  --fs-display: 4rem;     /* 64 — hero */
  --fs-h1: 3rem;          /* 48 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-h3: 1.5rem;        /* 24 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-body-sm: 0.875rem; /* 14 */
  --fs-caption: 0.75rem;  /* 12 */
  --fs-label: 0.6875rem;  /* 11 — Consolas labels */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-label: 0.14em;  /* Consolas labels */

  /* --- Spacing (8pt grid) ----------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* --- Radii ------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* --- Shadows ---------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.10);
  --shadow-focus: 0 0 0 2px var(--cal-white), 0 0 0 4px var(--cal-teal);

  /* --- Motion ----------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;

  /* --- Layout ----------------------------------------------- */
  --container-prose: 960px;
  --container-wide: 1120px;
}

/* ============================================================
   Base type styles
   Use these classes (or copy the underlying rules) anywhere
   the system needs to render branded text.
   ============================================================ */

.cal-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.cal-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.cal-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.cal-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.cal-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.cal-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.cal-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.cal-body-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.cal-small {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.cal-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* "01 / SECTION" labels — the signature mono ribbon */
.cal-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cal-teal);
}

.cal-jp {
  font-family: var(--font-jp);
}

/* ============================================================
   Element-level resets — opt-in via .cal-typeset wrapper.
   ============================================================ */

.cal-typeset {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.cal-typeset h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0 0 var(--sp-5); }
.cal-typeset h2 { font: var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display); margin: var(--sp-7) 0 var(--sp-4); }
.cal-typeset h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); margin: var(--sp-6) 0 var(--sp-3); }
.cal-typeset p  { margin: 0 0 var(--sp-4); }
.cal-typeset a  { color: var(--cal-teal); text-decoration: none; }
.cal-typeset a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cal-typeset code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-sm); }