/* ==========================================================================
   Eyox Design System — Colors & Type
   Healthcare SaaS for opticians. Clinical, calming, precise.
   Source of truth: eyox-data-mobile-app (React Native). Hex values are
   lifted from the actual codebase screens (LoginScreen, DashboardScreen,
   ParticipantFormScreen).
   ========================================================================== */

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

:root {
  /* ---------- Brand: Teal (primary UI) ---------- */
  --eyox-teal-900: #4D757F;   /* Primary buttons, selected states, icon color */
  --eyox-teal-700: #6796A2;   /* Borders, secondary buttons, dividers */
  --eyox-teal-300: #A8DDE4;   /* Hairline borders on cards, soft chips */
  --eyox-teal-200: #D9EEF2;   /* Login outer circle */
  --eyox-teal-150: #CCE5EA;   /* Login middle circle */
  --eyox-teal-100: #E5F8FB;   /* Surface headers, welcome band */
  --eyox-teal-050: #F2FBFD;   /* Page background */
  --eyox-teal-025: #F6FDFE;   /* Paper / input fills, on-primary text */

  /* ---------- Brand: Navy (emphasis only — logo, H1) ---------- */
  --eyox-navy-900: #1B4079;   /* Logo, hero headings, key numerals */

  /* ---------- Secondary: Soft pinks (accents) ---------- */
  --eyox-pink-300: #FFC4EB;
  --eyox-pink-200: #FFD6F1;
  --eyox-pink-100: #FFEBF8;

  /* ---------- Neutrals ---------- */
  --eyox-ink-900:  #383C42;   /* Primary body text */
  --eyox-ink-700:  #717884;   /* Secondary text, captions */
  --eyox-ink-500:  #8DB1BA;   /* Placeholder text (teal-tinted) */
  --eyox-ink-400:  #A6C2C9;   /* Placeholder on teal fields */
  --eyox-ink-300:  #A7ACB4;   /* Disabled text, neutral placeholder */
  --eyox-ink-200:  #B0BEC5;   /* Disabled button background */
  --eyox-ink-100:  #E2E8F0;   /* Neutral borders (legacy) */

  /* ---------- Semantic: soft icon chips on dashboard ---------- */
  --eyox-chip-blue:   #E6EEF9;   /* Calendar chip */
  --eyox-chip-green:  #E5FBED;   /* Sync chip */
  --eyox-chip-orange: #FBEEE5;   /* Hourglass chip */

  /* ---------- Semantic: status ---------- */
  --eyox-success-700: #10B981;
  --eyox-success-500: #2D9F79;
  --eyox-success-100: #ECFDF5;

  --eyox-info-700:    #3B82F6;
  --eyox-info-100:    #EFF6FF;

  --eyox-warn-700:    #D97706;
  --eyox-warn-100:    #FEF3C7;

  --eyox-danger-700:  #E03E3E;      /* Destructive confirm button */
  --eyox-danger-600:  #EF4444;
  --eyox-danger-500:  #DC2626;
  --eyox-danger-100:  #FEF2F2;
  --eyox-danger-050:  #FCEDED;      /* Destructive icon chip background */

  /* ---------- Link ---------- */
  --eyox-link:        #0066CC;

  /* ---------- Semantic roles (role-based vars) ---------- */
  --bg:               var(--eyox-teal-050);
  --bg-elevated:      var(--eyox-teal-025);
  --bg-band:          var(--eyox-teal-100);
  --surface:          #FFFFFF;
  --border:           var(--eyox-teal-300);
  --border-strong:    var(--eyox-teal-700);
  --divider:          var(--eyox-teal-700);

  --fg:               var(--eyox-ink-900);
  --fg-muted:         var(--eyox-ink-700);
  --fg-placeholder:   var(--eyox-ink-300);
  --fg-on-primary:    var(--eyox-teal-025);

  --primary:          var(--eyox-teal-900);
  --primary-hover:    color-mix(in oklab, var(--eyox-teal-900) 90%, black);
  --primary-subtle:   var(--eyox-teal-100);
  --accent:           var(--eyox-navy-900);   /* logo / H1 only */

  /* ---------- Type ---------- */
  --font-sans: 'Sora', ui-sans-serif, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Weights — Sora stack in use: 300/400/500/600/700 (loaded from Google Fonts) */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Type scale — derived from the mobile codebase (base = 16 mobile, scaled up slightly for desktop) */
  --fs-display:   32px;   /* hero on web / big numerals */
  --fs-h1:        24px;   /* Dashboard "{User name}" */
  --fs-h2:        22px;   /* Login "Sign In" */
  --fs-h3:        18px;   /* Stats number, modal title */
  --fs-body:      16px;   /* default body / field text */
  --fs-meta:      14px;   /* secondary labels, secure-login */
  --fs-caption:   13px;   /* terms copy */
  --fs-xs:        12px;   /* meta, chip label, Ready-to-capture subtitle */
  --fs-badge:     11px;   /* status pill */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.5;

  /* ---------- Shape / radii ---------- */
  /* Codebase consistently uses 2px for inputs and most interactive
     containers; 4px for buttons, pills, cards; 8px for the larger
     "Eye Capture" call-to-action container; 16–30px for modal sheets and
     circular chips. Keep corners SHARP for the clinical feel. */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* ---------- Spacing (4pt grid, from codebase gaps) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;  /* Default card padding & section gap */
  --space-5:   20px;
  --space-6:   24px;  /* Large card padding / vertical rhythm */
  --space-8:   32px;
  --space-10:  40px;

  /* ---------- Elevation (intentionally light — clinical / flat) ---------- */
  --shadow-none:   none;
  --shadow-thumb:  0 1px 2px rgba(77, 117, 127, 0.25);  /* slider thumb */
  --shadow-modal:  0 20px 40px rgba(27, 64, 121, 0.18);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ==========================================================================
   Base semantic elements — drop a class on a container and reset inside.
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--fg);
  background: var(--bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyox h1, .eyox-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--eyox-navy-900);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}
.eyox h2, .eyox-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--eyox-navy-900);
  line-height: var(--lh-snug);
}
.eyox h3, .eyox-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--eyox-navy-900);
  line-height: var(--lh-snug);
}
.eyox-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--eyox-teal-900);
}
.eyox-body { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--fg); }
.eyox-meta { font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--fg-muted); }
.eyox-caption { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--fg-muted); line-height: 18px; }
.eyox-xs { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--fg-muted); }
.eyox-badge { font-size: var(--fs-badge); font-weight: var(--fw-semibold); letter-spacing: 0.01em; }
.eyox-mono { font-family: var(--font-mono); font-size: 15px; color: var(--eyox-teal-900); font-weight: var(--fw-medium); }