/* tokens/fonts.css */
/* In Focus Optics — Webfonts
 * Display: Outfit (geometric sans, rounded terminals — closest match to the
 *          rounded-geometric wordmark in the logo).
 * Body:    Manrope (humanist-geometric sans, excellent at text sizes).
 * Loaded from Google Fonts CDN. If you need self-hosted binaries, drop the
 * .woff2 files in assets/fonts/ and swap the src: url() below.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* tokens/colors.css */
/* In Focus Optics — Color tokens
 * Anchor: brand blue #0058A0 (sampled from the logo).
 * Warmed with earth-tone neutrals — cream, sand, clay — for a calm,
 * minimal opticians feel. One warm accent (clay) for highlights.
 */

:root {
  /* ---- Brand blue scale (primary) ---- */
  --blue-50:  #eaf2fa;
  --blue-100: #cfe1f2;
  --blue-200: #a6c8e6;
  --blue-300: #6ba4d6;
  --blue-400: #2f7ec0;
  --blue-500: #0058a0; /* brand */
  --blue-600: #004e8f;
  --blue-700: #013f73;
  --blue-800: #053152;
  --blue-900: #07263f;

  /* ---- Warm neutrals (earth tones) ---- */
  --cream-50:  #faf7f1; /* page background */
  --cream-100: #f4efe5; /* sunk surfaces */
  --sand-200:  #ece4d6;
  --sand-300:  #ddd1bd;
  --clay-400:  #c2ab8f;
  --stone-500: #8d8071;
  --stone-600: #6c6256;
  --stone-700: #4d463d;
  --stone-800: #332e28;
  --ink-900:   #211d18; /* near-black, warm */

  /* ---- Warm accent (clay / terracotta) ---- */
  --clay-50:  #f8f0e8;
  --clay-100: #efddcb;
  --clay-300: #d9a878;
  --clay-500: #c07e44; /* accent */
  --clay-600: #a3672f;
  --clay-700: #7e4f24;

  /* ---- Semantic status ---- */
  --success-500: #4f7a52;
  --success-50:  #eaf1e9;
  --warning-500: #c89a3a;
  --warning-50:  #f8f0db;
  --danger-500:  #b4493f;
  --danger-50:   #f7e8e6;
  --info-500:    var(--blue-500);
  --info-50:     var(--blue-50);

  /* ---- Pure ---- */
  --white: #ffffff;
  --black: #000000;

  /* ================= Semantic aliases ================= */
  /* Surfaces */
  --surface-page:    var(--cream-50);
  --surface-card:    var(--white);
  --surface-sunk:    var(--cream-100);
  --surface-inverse: var(--blue-800);
  --surface-accent:  var(--clay-50);
  --surface-brand:   var(--blue-500);

  /* Text */
  --text-strong:  var(--ink-900);
  --text-body:    var(--stone-700);
  --text-muted:   var(--stone-500);
  --text-onbrand: var(--white);
  --text-oninverse: var(--cream-50);
  --text-brand:   var(--blue-500);
  --text-accent:  var(--clay-600);
  --text-link:    var(--blue-600);

  /* Borders */
  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--clay-400);
  --border-brand:   var(--blue-500);
  --border-focus:   var(--blue-400);

  /* Interaction tints */
  --brand-hover:   var(--blue-600);
  --brand-active:  var(--blue-700);
  --accent-hover:  var(--clay-600);
  --accent-active: var(--clay-700);
}

/* tokens/typography.css */
/* In Focus Optics — Typography tokens
 * Display: Outfit  (geometric, used for headings, wordmark-adjacent moments)
 * Body:    Manrope (humanist-geometric, used for running text + UI)
 * Mono:    system monospace (rarely used — prescriptions, measurements)
 */

:root {
  /* Families */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --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 */
  --fw-extra:    800; /* @kind font */

  /* Type scale — fluid-friendly fixed steps (1.20 ratio, tightened heads) */
  --text-xs:   0.75rem;   /* 12px — labels, eyebrows */
  --text-sm:   0.875rem;  /* 14px — captions, meta */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead body */
  --text-lg:   1.375rem;  /* 22px — small headings */
  --text-xl:   1.75rem;   /* 28px — h4 */
  --text-2xl:  2.25rem;   /* 36px — h3 */
  --text-3xl:  3rem;      /* 48px — h2 */
  --text-4xl:  4rem;      /* 64px — h1 */
  --text-5xl:  5.5rem;    /* 88px — hero display */

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.16em; /* uppercase eyebrows / OPTICIANS-style labels */

  /* Semantic roles */
  --display-font:  var(--font-display);
  --heading-font:  var(--font-display);
  --body-font:     var(--font-body);
  --label-font:    var(--font-body);
}

/* tokens/spacing.css */
/* In Focus Optics — Spacing, radii, elevation, motion */

:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6.5rem;   /* 104 */
  --space-12: 8rem;     /* 128 */

  /* Radii — soft, rounded to echo the geometric wordmark */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation — soft, warm-tinted shadows (low blur, generous spread) */
  --shadow-xs: 0 1px 2px rgba(33, 29, 24, 0.05);
  --shadow-sm: 0 2px 6px rgba(33, 29, 24, 0.06);
  --shadow-md: 0 6px 18px rgba(33, 29, 24, 0.08);
  --shadow-lg: 0 16px 40px rgba(33, 29, 24, 0.10);
  --shadow-xl: 0 28px 64px rgba(33, 29, 24, 0.14);
  --shadow-brand: 0 12px 30px rgba(0, 88, 160, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Focus ring */
  --ring-width: 3px;
  --ring-color: rgba(47, 126, 192, 0.45);

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --gutter: var(--space-5);

  /* Motion — calm, no bounce. Confident ease. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */
}

/* tokens/base.css */
/* In Focus Optics — base element styles
 * Light-touch defaults so consumer pages inherit the brand without a reset war.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--text-lg); letter-spacing: var(--tracking-snug); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / OPTICIANS-style label */
.eyebrow {
  font-family: var(--body-font);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

::selection { background: var(--blue-100); color: var(--ink-900); }