/* =========================================================================
   tebIQ Design System — Foundations
   Premium, cinematic, medical-grade. Apple-inspired restraint.
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------- */
/* Primary: Inter (Apple SF Pro feel, broad weight range).
   Mono:    JetBrains Mono (technical / AI details).
   FLAG: SF Pro Display is the spec preference. Inter is the closest
   open-source match available on Google Fonts; substitute SF Pro Display
   if you have a license. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ===== Color — Light (default) ====================================== */

  /* Surfaces — neutrals warm only by a hair, never bluish */
  --bg:                 #FFFFFF;
  --bg-elevated:        #FAFAFA;
  --bg-muted:           #F5F5F7;       /* Apple-style tray gray */
  --bg-sunken:          #EFEFF2;

  /* Text */
  --fg:                 #1D1D1F;       /* primary */
  --fg-secondary:       #6E6E73;       /* subhead, paragraph */
  --fg-tertiary:        #A1A1A6;       /* captions, hints */
  --fg-quaternary:      #C7C7CC;       /* placeholder */

  /* Borders / hairlines */
  --border:             rgba(0, 0, 0, 0.08);
  --border-strong:      rgba(0, 0, 0, 0.14);
  --border-subtle:      rgba(0, 0, 0, 0.04);

  /* Brand & semantic accents */
  --accent:             #0A84FF;       /* medical-trust blue, slightly deeper than Apple system blue */
  --accent-hover:       #0066D6;
  --accent-pressed:     #0059BD;
  --accent-soft:        rgba(10, 132, 255, 0.12);
  --accent-foreground:  #FFFFFF;

  --ai:                 #5E5CE6;       /* AI indigo */
  --ai-soft:            rgba(94, 92, 230, 0.12);

  --success:            #30A46C;       /* calmer than #30D158 for medical context */
  --success-soft:       rgba(48, 164, 108, 0.12);
  --warning:            #E5A100;
  --warning-soft:       rgba(229, 161, 0, 0.12);
  --error:              #E5484D;       /* calm red, not aggressive */
  --error-soft:         rgba(229, 72, 77, 0.10);

  /* Cinematic backgrounds */
  --glow-blue:          radial-gradient(circle at 50% 50%, rgba(10,132,255,0.18), transparent 60%); /* @kind color */
  --glow-ai:            radial-gradient(circle at 50% 50%, rgba(94,92,230,0.20), transparent 65%); /* @kind color */
  --gradient-ai:        linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%); /* @kind color */
  --gradient-silver:    linear-gradient(180deg, #F5F5F7 0%, #E5E5EA 100%); /* @kind color */

  /* ===== Typography ================================================== */
  --font-sans:          "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Scale — display through caption */
  --fs-hero:            clamp(38px, 7vw, 96px); /* @kind font */
  --fs-display:         clamp(32px, 5vw, 64px); /* @kind font */
  --fs-h1:              clamp(28px, 4vw, 48px); /* @kind font */
  --fs-h2:              clamp(24px, 3vw, 36px); /* @kind font */
  --fs-h3:              22px; /* @kind font */
  --fs-h4:              18px; /* @kind font */
  --fs-lead:            clamp(19px, 1.5vw, 24px); /* @kind font */
  --fs-body:            17px; /* @kind font */
  --fs-body-sm:         15px; /* @kind font */
  --fs-caption:         13px; /* @kind font */
  --fs-micro:           11px; /* @kind font */

  --lh-hero:            1.02; /* @kind font */
  --lh-display:         1.06; /* @kind font */
  --lh-heading:         1.15; /* @kind font */
  --lh-body:            1.55; /* @kind font */
  --lh-tight:           1.25; /* @kind font */

  --tracking-hero:      -0.04em; /* @kind font */
  --tracking-display:   -0.03em; /* @kind font */
  --tracking-heading:   -0.02em; /* @kind font */
  --tracking-body:      -0.005em; /* @kind font */
  --tracking-caption:   0.01em; /* @kind font */
  --tracking-eyebrow:   0.12em;        /* uppercase eyebrows @kind font */

  --fw-light:           300; /* @kind font */
  --fw-regular:         400; /* @kind font */
  --fw-medium:          500; /* @kind font */
  --fw-semibold:        600; /* @kind font */
  --fw-bold:            700; /* @kind font */

  /* ===== Spacing (8pt) =============================================== */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;
  --space-3xl:          64px;
  --space-4xl:          96px;
  --space-5xl:          128px;

  /* ===== Radius ====================================================== */
  --radius-xs:          6px;
  --radius-sm:          10px;
  --radius-md:          14px;
  --radius-lg:          20px;
  --radius-xl:          28px;
  --radius-2xl:         36px;
  --radius-pill:        999px;

  /* ===== Shadows / Elevation ========================================= */
  --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:          0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:          0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-lg:          0 24px 70px rgba(0, 0, 0, 0.12);
  --shadow-xl:          0 40px 120px rgba(0, 0, 0, 0.18);
  --shadow-glow-blue:   0 40px 120px rgba(10, 132, 255, 0.25);
  --shadow-glow-ai:     0 40px 120px rgba(94, 92, 230, 0.28);
  --shadow-focus:       0 0 0 4px rgba(10, 132, 255, 0.18);

  /* ===== Motion ====================================================== */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --dur-fast:           180ms; /* @kind other */
  --dur-normal:         300ms; /* @kind other */
  --dur-slow:           600ms; /* @kind other */
  --dur-cinematic:      1000ms; /* @kind other */

  /* ===== Glass / Blur ================================================ */
  --glass-light:        rgba(255, 255, 255, 0.72); /* @kind color */
  --glass-light-strong: rgba(255, 255, 255, 0.85); /* @kind color */
  --glass-dark:         rgba(0, 0, 0, 0.72); /* @kind color */
  --blur-sm:            blur(10px); /* @kind other */
  --blur-md:            blur(20px); /* @kind other */
  --blur-lg:            blur(40px); /* @kind other */

  /* ===== Layout ====================================================== */
  --max-content:        1280px; /* @kind spacing */
  --max-prose:          760px; /* @kind spacing */
  --max-wide:           1440px; /* @kind spacing */
  --nav-h:              64px; /* @kind spacing */
}

/* ---- Dark mode --------------------------------------------------------- */
:root[data-theme="dark"],
.theme-dark {
  --bg:                 #000000;
  --bg-elevated:        #111113;
  --bg-muted:           #1C1C1E;
  --bg-sunken:          #0A0A0B;

  --fg:                 #F5F5F7;
  --fg-secondary:       #A1A1A6;
  --fg-tertiary:        #6E6E73;
  --fg-quaternary:      #48484A;

  --border:             rgba(255, 255, 255, 0.10);
  --border-strong:      rgba(255, 255, 255, 0.16);
  --border-subtle:      rgba(255, 255, 255, 0.06);

  --accent:             #0A84FF;
  --accent-hover:       #409CFF;
  --accent-pressed:     #0066D6;
  --accent-soft:        rgba(10, 132, 255, 0.18);

  --glass-light:        rgba(28, 28, 30, 0.72);
  --glass-light-strong: rgba(28, 28, 30, 0.88);

  --shadow-md:          0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 24px 70px rgba(0, 0, 0, 0.6);
  --shadow-xl:          0 40px 100px rgba(0, 0, 0, 0.7);
}

/* =========================================================================
   Semantic element styles — drop colors_and_type.css into any prototype
   and headings/paragraphs/code will follow the system out of the box.
   ========================================================================= */

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6 { color: var(--fg); font-weight: var(--fw-semibold); margin: 0; text-wrap: balance; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight);   letter-spacing: var(--tracking-heading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight);   letter-spacing: var(--tracking-heading); }

.hero        { font-size: var(--fs-hero);    line-height: var(--lh-hero);    letter-spacing: var(--tracking-hero);    font-weight: var(--fw-semibold); }
.display     { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); }
.lead        { font-size: var(--fs-lead);    line-height: 1.4;               color: var(--fg-secondary); font-weight: var(--fw-regular); }

p { margin: 0; color: var(--fg-secondary); text-wrap: pretty; }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.caption     { font-size: var(--fs-caption); letter-spacing: var(--tracking-caption); color: var(--fg-tertiary); }
.body-sm     { font-size: var(--fs-body-sm); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg);
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--fg); }

/* Focus ring — visible, calm, accessible */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}