/* ============================================================
   see-ai · Design System · Colors + Type
   Brand shell: dentro_  (ink / paper / cyan + terminal cursor)
   ============================================================ */

/* ---------- Fonts (Google Fonts mirrors of the brand stack) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     1. CORE BRAND COLORS: exact values sampled from logo files
     ============================================================ */
  --ink:    #0D0F1A;   /* primary dark: wordmark, on-paper text */
  --paper:  #F4F2EC;   /* primary light: page background */
  --cyan:   #08C8E5;   /* brand accent: the cursor / capsule */

  /* ============================================================
     2. EXTENDED NEUTRALS
     Dark side (ink) and light side (paper) ramps. Keep low chroma
     so the cyan stays the only "loud" color.
     ============================================================ */
  /* Ink ramp: surfaces & dividers on dark backgrounds */
  --ink-0:  #07090F;   /* deepest: page bg in pure dark mode */
  --ink-1:  #0D0F1A;   /* canonical ink */
  --ink-2:  #161A28;   /* raised surface */
  --ink-3:  #1F2436;   /* elevated card */
  --ink-4:  #2A3046;   /* hairline borders on ink */
  --ink-5:  #3A4159;   /* stronger borders, disabled fg */

  /* Paper ramp: surfaces & dividers on light backgrounds */
  --paper-0: #FAF8F2;  /* lightest: modal/overlay */
  --paper-1: #F4F2EC;  /* canonical paper */
  --paper-2: #ECE8DD;  /* raised card / inset */
  --paper-3: #DFD9C8;  /* hairline borders */
  --paper-4: #C8C1AC;  /* stronger borders */

  /* Warm grays: body copy on paper */
  --warm-700: #2A2B2E;
  --warm-600: #4A4B4E;
  --warm-500: #6E6F73;
  --warm-400: #94959A;

  /* ============================================================
     3. CYAN RAMP: used sparingly as accent + focus
     ============================================================ */
  --cyan-50:  #E6F9FD;
  --cyan-100: #BFF0FA;
  --cyan-200: #80E2F4;
  --cyan-300: #40D5EF;
  --cyan-500: #08C8E5;   /* canonical */
  --cyan-600: #06A6BF;
  --cyan-700: #047E92;
  --cyan-800: #03596A;

  /* ============================================================
     4. SEMANTIC STATUS COLORS
     Calm, grounded: never "alarming" outside of real errors.
     ============================================================ */
  --success: #2E8B57;
  --success-bg: #E4F1EA;
  --warning: #B5731B;
  --warning-bg: #F6EAD3;
  --danger:  #B23A2E;
  --danger-bg: #F4E0DC;
  --info:    var(--cyan-700);
  --info-bg: var(--cyan-50);

  /* ============================================================
     5. SEMANTIC TOKENS: light theme (paper)
     ============================================================ */
  --bg:           var(--paper-1);
  --bg-raised:    var(--paper-0);
  --bg-sunken:    var(--paper-2);
  --surface:      #FFFFFF;

  --fg:           var(--ink-1);       /* primary text */
  --fg-muted:     var(--warm-600);    /* secondary text */
  --fg-subtle:    var(--warm-500);    /* tertiary / meta */
  --fg-disabled:  var(--warm-400);
  --fg-on-ink:    var(--paper-1);     /* text on dark bg */
  --fg-on-cyan:   var(--ink-1);       /* text on cyan bg */

  --border:       var(--paper-3);
  --border-strong: var(--paper-4);
  --border-focus: var(--cyan-600);

  --accent:       var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --accent-press: var(--cyan-700);

  /* ============================================================
     6. TYPOGRAPHY: base scale
     System: Geist (sans) + Geist Mono (terminal accent moments).
     Mono is the brand's voice: always use it for the trailing "_"
     cursor on hero wordmarks, tags, and product codes.
     ============================================================ */
  --font-sans: "Geist", -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --font-display: var(--font-sans);

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

  /* Type scale: 1.200 (minor third), tuned for WCAG comfort.
     Body sits at 17px, never below 16px on production surfaces. */
  --fs-12: 0.75rem;    /* 12px: meta only, never body */
  --fs-14: 0.875rem;   /* 14px: captions, badges */
  --fs-16: 1rem;       /* 16px: secondary body */
  --fs-17: 1.0625rem;  /* 17px: canonical body */
  --fs-19: 1.1875rem;  /* 19px: lead paragraph */
  --fs-22: 1.375rem;   /* 22px: h4 */
  --fs-28: 1.75rem;    /* 28px: h3 */
  --fs-36: 2.25rem;    /* 36px: h2 */
  --fs-48: 3rem;       /* 48px: h1 small */
  --fs-64: 4rem;       /* 64px: hero */
  --fs-88: 5.5rem;     /* 88px: display */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-mono:  0.02em;  /* mono labels get a touch of breathing */

  /* ============================================================
     7. SPACING / RADII / SHADOWS / MOTION
     ============================================================ */
  /* 4px base, doubled at the top */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii: sharper than typical SaaS. Cards stay nearly square. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows: soft, low-contrast. Never neon. */
  --shadow-1: 0 1px 0 rgba(13,15,26,0.04), 0 1px 2px rgba(13,15,26,0.04);
  --shadow-2: 0 2px 4px rgba(13,15,26,0.05), 0 4px 12px rgba(13,15,26,0.06);
  --shadow-3: 0 6px 14px rgba(13,15,26,0.07), 0 14px 32px rgba(13,15,26,0.08);
  --shadow-inset: inset 0 0 0 1px rgba(13,15,26,0.06);

  /* Focus ring: always visible, never display:none. WCAG 2.4.7. */
  --focus-ring: 0 0 0 2px var(--paper-1), 0 0 0 4px var(--cyan-500);
  --focus-ring-ink: 0 0 0 2px var(--ink-1), 0 0 0 4px var(--cyan-500);

  /* Motion: short, calm. No bouncy springs. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Containers */
  --container-narrow: 720px;
  --container-text: 880px;
  --container-page: 1240px;
}

/* ============================================================
   8. SEMANTIC ELEMENT STYLES
   Use these directly: they encode the type system.
   ============================================================ */
html { font-size: 16px; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(var(--fs-48), 6vw, var(--fs-88));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(var(--fs-36), 4vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-2);
}

p, .body {
  font-size: var(--fs-17);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  max-width: var(--container-text);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-19);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

small, .small {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
}

/* The brand's signature trailing cursor: used after the wordmark
   and on hero "speakable" headlines. */
.cursor::after {
  content: "_";
  font-family: var(--font-mono);
  color: var(--cyan-500);
  margin-left: 0.05em;
  display: inline-block;
  animation: cursor-blink 1.1s steps(2, end) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Reduced motion: REQUIRED. Site sells assistive tech; this is non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cursor::after { animation: none; opacity: 1; }
}

/* Focus: visible everywhere, no exceptions. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.on-ink :focus-visible { box-shadow: var(--focus-ring-ink); }

::selection { background: var(--cyan-200); color: var(--ink-1); }