/* ============================================================
   dr.olho Design System — Colors & Typography
   Source: manual_marca.pdf
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Kollektif";
  src: url("fonts/Kollektif.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kollektif";
  src: url("fonts/Kollektif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kollektif";
  src: url("fonts/Kollektif-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kollektif";
  src: url("fonts/Kollektif-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colors (from manual_marca.pdf) ---------- */
  --color-purple: #220082;       /* primary — "dr.olho", body text on light */
  --color-green:  #3efa98;       /* primary — symbol & "oftalmologia" */
  --color-cyan:   #38ddfa;       /* support 1 */
  --color-pink:   #f26d8c;       /* support 2 */

  /* Tints (derived for hover/press/wash/surface usage) */
  --color-purple-900: #15004f;
  --color-purple-800: #1c0068;
  --color-purple-700: #220082;   /* base */
  --color-purple-500: #3a1fb0;
  --color-purple-200: #c8bce8;
  --color-purple-100: #e8e2f6;
  --color-purple-050: #f4f1fb;

  --color-green-700:  #16c473;
  --color-green-500:  #3efa98;   /* base */
  --color-green-300:  #8cffc6;
  --color-green-100:  #d6ffe8;

  --color-cyan-500:   #38ddfa;
  --color-cyan-100:   #d4f6fd;

  --color-pink-500:   #f26d8c;
  --color-pink-100:   #fde0e7;

  /* Neutrals */
  --color-black:   #0a0612;
  --color-ink:     #160a2f;        /* dark text fallback (purple-tinted near-black) */
  --color-gray-900: #1f1633;
  --color-gray-700: #443a5b;
  --color-gray-500: #6f6585;
  --color-gray-300: #c9c4d6;
  --color-gray-200: #e4e1ec;
  --color-gray-100: #f1eff6;
  --color-gray-050: #f8f7fb;
  --color-white:   #ffffff;

  /* ---------- Semantic tokens (light surface) ---------- */
  --bg:            var(--color-white);
  --bg-subtle:     var(--color-gray-050);
  --bg-muted:      var(--color-purple-050);
  --bg-inverse:    var(--color-purple-700);

  --fg:            var(--color-purple-700);  /* primary text on light */
  --fg-strong:     var(--color-purple-900);
  --fg-muted:      var(--color-gray-700);
  --fg-subtle:     var(--color-gray-500);
  --fg-inverse:    var(--color-white);
  --fg-accent:     var(--color-green-700);   /* "oftalmologia" tone on light */

  --border:        var(--color-gray-200);
  --border-strong: var(--color-purple-200);
  --border-accent: var(--color-green-500);

  --accent:        var(--color-green-500);
  --accent-fg:     var(--color-purple-700);  /* text on green */
  --accent-hover:  var(--color-green-700);

  --primary:       var(--color-purple-700);
  --primary-fg:    var(--color-white);
  --primary-hover: var(--color-purple-800);

  /* Status (re-using brand support palette) */
  --info:    var(--color-cyan-500);
  --warn:    #f5b942;
  --danger:  var(--color-pink-500);
  --success: var(--color-green-700);

  /* ---------- Type ---------- */
  --font-sans: "Kollektif", "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 0.75rem;     --lh-12: 1.4;
  --fs-14: 0.875rem;    --lh-14: 1.5;
  --fs-16: 1rem;        --lh-16: 1.55;
  --fs-18: 1.125rem;    --lh-18: 1.55;
  --fs-20: 1.25rem;     --lh-20: 1.45;
  --fs-24: 1.5rem;      --lh-24: 1.35;
  --fs-32: 2rem;        --lh-32: 1.2;
  --fs-44: 2.75rem;     --lh-44: 1.1;
  --fs-64: 4rem;        --lh-64: 1.0;
  --fs-96: 6rem;        --lh-96: 0.95;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;

  /* ---------- Spacing (4pt grid) ---------- */
  --sp-0:  0;
  --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-none: 0;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 9999px;
  /* The brand symbol is a perfect circle; cards prefer organic, generous radii. */

  /* ---------- Shadows (purple-tinted, soft) ---------- */
  --shadow-xs: 0 1px 2px rgba(34, 0, 130, 0.06);
  --shadow-sm: 0 2px 6px rgba(34, 0, 130, 0.08);
  --shadow-md: 0 8px 20px rgba(34, 0, 130, 0.10);
  --shadow-lg: 0 18px 40px rgba(34, 0, 130, 0.14);
  --shadow-glow: 0 0 0 6px rgba(62, 250, 152, 0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ---------- Semantic element styles ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  line-height: var(--lh-16);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-64);
  line-height: var(--lh-64);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-weight: 700;
  font-size: var(--fs-44);
  line-height: var(--lh-44);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  margin: 0;
}
h4, .h4 {
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  margin: 0;
}
h5, .h5 {
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  margin: 0;
}
p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  color: var(--fg-muted);
}
small, .caption {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--fg-muted);
}
.eyebrow {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: lowercase;
  font-weight: 700;
  color: var(--fg-accent);
}
code, kbd, pre, .mono { font-family: var(--font-mono); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* The "wordmark" lockup style — used for the dr.olho name in headings */
.wordmark {
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-purple-700);
}
.wordmark-suffix {
  font-weight: 400;
  color: var(--color-green-700);
  letter-spacing: 0;
}