/* theme-flon (LIGHT ONLY) */
:root {
  /* Ensure browser UI uses light styling for native controls */
  color-scheme: light;

  /* --- FLON Core Palette --- */
  --flon-orange: #E65B24; /* Accent / CTA */
  --flon-ink:    #0F1220; /* Primary text (deep slate/ink) */
  --flon-slate:  #2B5F3A; /* Headers, UI chrome */
  --flon-mid:    #E9ECEF; /* Dividers, borders, subtle fills */
  --flon-canvas: #FFFFFF; /* Page background */
  --flon-tint:   #FFF7ED; /* Soft warm tint for sections */

  /* Map to your current token names (backward compatible) */
  --color-primary: var(--flon-slate);
  --color-secondary: var(--flon-canvas);
  --color-accent: var(--flon-orange);
  --color-accent-hover: #D95722;       /* ~10% darker */
  --color-bg: var(--flon-canvas);
  --color-bg-opacity: 1;
  --color-border: var(--flon-mid);
  --color-text: var(--flon-ink);
  --color-text-light: var(--flon-canvas);

  --color-error: #D32F2F;   /* medical red */
  --color-success: #1DB954; /* confirmation green */

  /* Neo-Swiss geometry */
  --border-radius: 6px;     /* buttons/cards; use 12px for big cards */
  --radius-card: 12px;

  /* Swiss shadows: restrained, single light source (top-left) */
  --box-shadow: 0 2px 6px rgba(15,18,32,0.15);
  --box-shadow2: 0 4px 10px rgba(15,18,32,0.18);

  /* --- RGB helpers --- */
  --flon-orange-rgb: 230, 91, 36;
  --flon-ink-rgb:    15, 18, 32;
  --flon-slate-rgb:  43, 95, 58;
  --flon-mid-rgb:   233, 236, 239;
  --flon-canvas-rgb:255, 255, 255;
  --flon-tint-rgb:  255, 247, 237;

  /* Swiss-approved background options (pick one per section) */

  /* 1) Clean canvas (default) */
  --background-plain: linear-gradient(180deg, rgba(var(--flon-canvas-rgb),1), rgba(var(--flon-canvas-rgb),1));

  /* 2) Subtle tint wash (section backdrops) */
  --background-tint: linear-gradient(180deg, rgba(var(--flon-canvas-rgb),1) 0%, rgba(var(--flon-tint-rgb),1) 100%);

  /* 3) Orange band hero (structural, not decorative) */
  --background-band: linear-gradient(30deg, rgba(var(--flon-orange-rgb),1) 0%, rgba(var(--flon-tint-rgb),1) 70%, rgba(var(--flon-canvas-rgb),1) 100%);

  /* 4) Minimal dark (for dark sections/cards) */
  --background-slate: linear-gradient(180deg, #1A1F2A 0%, #121622 100%);
  
  /* Back-compat so older pages don't break */
  --background-aurora: var(--background-tint);
  
  /* Cool mid gray background (Option B) */
  /*--background-midgray: linear-gradient(180deg,#F2F5F7 0%, #797979 100%);*/
  --background-midgray: linear-gradient(180deg,#F2F5F7 0%, #797979 100%);
  
  /* Slate mist variant (Option C) */
  --background-slatemist: linear-gradient(180deg,#F8FAFB 0%, #E6EBF0 100%);
}

/* ===== Components aligned to Neo-Swiss ===== */

/* Buttons */
.button, .btn {
  display:inline-block;
  padding:12px 18px;
  border-radius:var(--border-radius);
  font-weight:700;
  text-decoration:none;
  transition:filter .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.btn--primary {
  background:var(--color-accent);
  color:var(--color-text-light);
  border:1px solid transparent;
  box-shadow:var(--box-shadow);
}
.btn--primary:hover { background:var(--color-accent-hover); transform:translateY(-1px); }

.btn--ghost {
  background:transparent;
  color:var(--color-primary);
  border:1px solid var(--color-border);
}
.btn--ghost:hover { border-color:var(--color-primary); }

/* Cards / panels */
.card {
  background:var(--color-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

/* Nav / header */
.header {
  background:var(--color-secondary);
  color:var(--color-text);
  border-bottom:1px solid var(--color-border);
}

/* Typography */
h1,h2,h3 { color:var(--color-text); letter-spacing:-0.01em; }
p,li { color:var(--color-primary); line-height:1.55; }

/* Dividers */
.hr { height:1px; background:var(--color-border); border:0; }

/* Inputs */
.input, select, textarea {
  background:var(--color-secondary);
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:var(--border-radius);
  padding:10px 12px;
}
.input:focus { outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(var(--flon-orange-rgb), .15); }

/* Alerts */
.alert--error { background:#FDECEC; border:1px solid #F5B4B4; color:#7A1C1C; }
.alert--success { background:#ECFFF4; border:1px solid #B8F2CF; color:#0E6B3D; }

/* Section backgrounds */
.section--plain { background:var(--background-plain); }
.section--tint  { background:var(--background-tint); }
.section--band  { background:var(--background-band); }
.section--dark  { background:var(--background-slate); color:var(--color-text-light); }
.section--dark .btn--ghost { color:var(--color-text-light); border-color:rgba(255,255,255,.25); }

/* Links */
a { color:var(--color-text); text-underline-offset:2px; }
a:hover { color:var(--color-accent); }

/* Tables */
.table { border-collapse:collapse; width:100%; }
.table th, .table td { border-bottom:1px solid var(--color-border); padding:12px; }
.table th { color:var(--color-text); font-weight:700; }

/* Gradients for charts/fills (keep subtle) */
.gradient-orange-vert { background:linear-gradient(180deg, #E65B24 0%, #D95722 100%); }
.gradient-slate-vert  { background:linear-gradient(180deg, #2B5F3A 0%, #244C34 100%); }

/* Small accent bar utility */
.accent-bar { width:72px; height:6px; background:var(--flon-orange); }