/* ============================================================
   Todokan Design System — Colors & Type
   Source: todokan/apps/web/src/index.css + landing-page-v21.html
   ============================================================ */

/* Webfonts — Google Fonts (all 3 used in landing + product) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     BRAND PALETTE (from landing page tailwind config)
     ========================================================= */
  --moss:         #2E4036;   /* primary brand green */
  --moss-light:   #3D5548;
  --moss-dark:    #1A2A20;   /* page bg on landing */
  --clay:         #CF5807;   /* signature orange — the CTA color */
  --clay-light:   #E8731F;
  --clay-dark:    #A84706;
  --cream:        #F2F0E9;
  --cream-warm:   #EDE8DD;
  --charcoal:     #1A1A1A;

  /* Product app "Dark Todokan" tokens (default web/mobile theme) */
  --color-primary:           #014040;  /* deeper teal/moss — main surface */
  --color-secondary:         #1F2937;  /* card/panel bg */
  --color-wrapper:           #111827;  /* deep well / inputs */
  --color-accent:            #BB7B9A;  /* dusty rose — selection/focus */
  --color-border:            #374151;
  --color-text:              #FFFFFF;
  --color-text-muted:        #9CA3AF;
  --color-text-on-primary:   #FFFFFF;
  --color-text-on-secondary: #FFFFFF;

  /* Semantic state colors (from TaskCard + product) */
  --state-protected:   #EF4444;  /* shield lock */
  --state-read-only:   #F59E0B;  /* shield outline, amber */
  --state-ai-active:   #22D3EE;  /* cyan — AI in progress */
  --state-error:       #FBBF24;  /* soft amber, NOT red */
  --state-ok:          #22C55E;
  --state-ai-muted:    #9CA3AF;

  /* Jungle overlay colors (used when data-jungle="true") */
  --jungle-bg-fallback: #0A1A12;
  --jungle-panel:       rgba(31, 41, 55, 0.92);
  --jungle-wrapper:     rgba(17, 24, 39, 0.88);
  --jungle-border:      rgba(55, 65, 81, 0.80);

  /* Boards-next glass (the experimental "next" surface) */
  --glass-bg:          rgba(8, 20, 16, 0.72);
  --glass-bg-strong:   rgba(10, 24, 19, 0.88);
  --glass-border:      rgba(185, 200, 184, 0.14);
  --glass-shadow:      0 18px 48px rgba(0, 0, 0, 0.30);

  /* =========================================================
     TYPE STACK
     - sans: Plus Jakarta Sans         → UI, headings
     - serif: Cormorant Garamond       → editorial italic accent ("Connect your AI.")
     - mono: IBM Plex Mono             → labels, section numbers, stats
     ========================================================= */
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Semantic type sizes (from landing + product) */
  --font-size-display: clamp(2.5rem, 5vw, 3.5rem);  /* hero + big stats */
  --font-size-h1:      clamp(1.8rem, 4vw, 3rem);    /* section headings */
  --font-size-h2:      1.5rem;
  --font-size-h3:      1.25rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body:    1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-xs:      0.75rem;
  --font-size-micro:   0.6875rem;   /* meta, counts */

  /* Weights in use */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;   /* landing hero */

  /* =========================================================
     SPACING, RADIUS, SHADOW
     ========================================================= */
  --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;

  --radius-xs:  4px;   /* small pills (height 20) */
  --radius-sm:  6px;   /* compact task card */
  --radius-md:  8px;   /* task card, button */
  --radius-lg:  12px;  /* Paper default (mobile) */
  --radius-xl:  16px;  /* metric card */
  --radius-2xl: 18px;  /* hero side panel */
  --radius-3xl: 22px;  /* glass panel */
  --radius-4xl: 32px;  /* landing CTA */
  --radius-5xl: 48px;  /* hero pills */
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.30);           /* glass panels */
  --shadow-clay: 0 10px 24px rgba(207, 88, 7, 0.24);      /* orange CTA lift */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-lenis: cubic-bezier(0.0, 0.0, 0.2, 1); /* approx of landing's smooth scroll */
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* ============================================================
   SEMANTIC TYPE — compose once, reuse everywhere
   ============================================================ */

html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-extra);
  font-size: var(--font-size-display);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extra);
  font-size: var(--font-size-h1);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.t-editorial {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--font-size-h1);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: 1.55;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-sm);
  line-height: 1.5;
}

.t-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.t-micro {
  font-family: var(--font-sans);
  font-size: var(--font-size-micro);
  line-height: 1.4;
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-body-sm);
}

/* ============================================================
   OPINIONATED DEFAULTS  — import this file and these work.
   ============================================================ */
h1 { font: var(--fw-extra) var(--font-size-h1)/1.08 var(--font-sans); letter-spacing: -0.03em; }
h2 { font: var(--fw-semibold) var(--font-size-h2)/1.2 var(--font-sans); letter-spacing: -0.02em; }
h3 { font: var(--fw-semibold) var(--font-size-h3)/1.3 var(--font-sans); letter-spacing: -0.015em; }
p  { font: var(--font-size-body)/1.55 var(--font-sans); }
code, pre, kbd { font-family: var(--font-mono); }