/* ============================================================================
   SmarterEventing — Design Tokens & Kleurprofielen
   ============================================================================
   ENIGE bron van waarheid voor kleur in de admin én het company portal.

   Architectuur (apple-design principes):
   1. Semantische tokens beschrijven ROL (page, surface, text, accent),
      nooit een concrete kleur. Componenten en theme_light.css gebruiken
      uitsluitend var(--se-*).
   2. :root              -> donker thema (default, ongewijzigd).
   3. html.theme-light   -> licht thema: warm "papier"-palet, zacht contrast.
      Bewust géén zuiver wit (#FFF) en géén zuiver zwart: oppervlakken zijn
      wit-creme, tekst is warm inkt, borders zijn laag-contrast.
   4. html[data-color-profile="..."] -> kleurprofielen. Een profiel wijzigt
      alleen de accent-/selectiefamilie (en optioneel de primaire actiekleur);
      alle neutrale oppervlakken blijven gelijk. Zo kan één uniforme CSS
      meerdere huisstijlen bedienen. Profielen werken in dark én light.

   Beschikbare profielen: smarter (default), ocean, forest, graphite.
   Profiel kiezen: SmarterTheme.setProfile('ocean') of ?profile=ocean.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DONKER THEMA (default) — bestaande dark-mode kleuren, als tokens vastgelegd
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Oppervlakken */
  --se-page: #0B1020;
  --se-surface: #151A2C;
  --se-surface-2: #0D1228;
  --se-surface-3: #111933;
  --se-hover: #1B2242;
  --se-input: #0F1530;

  /* Tekst */
  --se-text: #E9EEF7;
  --se-text-2: #C7CDDB;
  --se-text-muted: #9AA4B2;
  --se-text-disabled: #5C6577;
  --se-text-inverse: #0B1020;

  /* Borders */
  --se-border: #202543;
  --se-border-strong: #2A3C69;

  /* Accent (huisstijl-goud) — profiel-overschrijfbaar */
  --se-accent: #B08D57;
  --se-accent-hover: #C4A26E;
  --se-accent-soft: rgba(176, 141, 87, 0.18);
  --se-accent-border: rgba(176, 141, 87, 0.45);
  --se-accent-contrast: #14100A;

  /* Primaire actie (knoppen) */
  --se-primary: #2A49FF;
  --se-primary-hover: #4A68FF;
  --se-primary-contrast: #FFFFFF;

  /* Status */
  --se-success-bg: rgba(16, 185, 129, 0.14);
  --se-success-fg: #34D399;
  --se-success-border: rgba(16, 185, 129, 0.35);
  --se-warning-bg: rgba(245, 158, 11, 0.14);
  --se-warning-fg: #FBBF24;
  --se-warning-border: rgba(245, 158, 11, 0.35);
  --se-danger-bg: rgba(239, 68, 68, 0.16);
  --se-danger-fg: #F87171;
  --se-danger-border: rgba(239, 68, 68, 0.38);
  --se-danger-strong: #B91C1C;
  --se-info-bg: rgba(59, 130, 246, 0.14);
  --se-info-fg: #60A5FA;
  --se-info-border: rgba(59, 130, 246, 0.35);

  /* Diepte & scheiding */
  --se-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --se-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --se-scrim: rgba(4, 7, 16, 0.60);
  --se-scrim-frost: rgba(11, 16, 32, 0.55);

  /* Scrollbars */
  --se-scrollbar-track: #0E1330;
  --se-scrollbar-thumb: #334155;
  --se-scrollbar-thumb-hover: #475569;

  /* Focus ring (apple-design: zichtbaar maar zacht) */
  --se-focus-ring: rgba(176, 141, 87, 0.55);

  /* Selectie (gemarkeerde tekst) */
  --se-selection-bg: rgba(176, 141, 87, 0.30);
  --se-selection-fg: #E9EEF7;
}

/* ---------------------------------------------------------------------------
   2. LICHT THEMA — warm "papier": creme in plaats van wit, inkt in plaats
      van zwart, borders met laag contrast. Rustig, stevig, professioneel.
      (html én body: sommige legacy pagina's zetten de class op body.)
   --------------------------------------------------------------------------- */
html.theme-light,
body.theme-light {
  color-scheme: light;

  /* Oppervlakken — gelaagdheid via subtiele warme stappen, nooit #FFFFFF */
  --se-page: #F2EFE8;        /* app-achtergrond: wit-creme */
  --se-surface: #FBFAF5;     /* kaarten/panels: warm papier */
  --se-surface-2: #F7F5EE;   /* navigatie, toolbars, tabelkoppen */
  --se-surface-3: #EFEBE1;   /* ingesprongen vlakken, wells, code */
  --se-hover: #ECE8DD;       /* hover-state */
  --se-input: #FDFCF8;       /* invoervelden: net iets lichter dan papier */

  /* Tekst — warme inkt, bewust géén #000/#111: max ~90% op papier */
  --se-text: #2B2820;
  --se-text-2: #55513F;
  --se-text-muted: #79736A;
  --se-text-disabled: #A8A294;
  --se-text-inverse: #FBFAF5;

  /* Borders — laag contrast, warm grijs */
  --se-border: #E2DDCF;
  --se-border-strong: #CFC8B4;

  /* Accent (huisstijl-goud, iets verzacht voor licht) */
  --se-accent: #A3874F;
  --se-accent-hover: #8F7440;
  --se-accent-soft: #F0E8D6;
  --se-accent-border: #D6C49C;
  --se-accent-contrast: #2B2313;

  /* Primaire actie — stevige warme inkt-knop i.p.v. hard zwart */
  --se-primary: #38341F;
  --se-primary-hover: #4C4732;
  --se-primary-contrast: #FBFAF5;

  /* Status — gedempte pastels, papier-tint i.p.v. verzadigd */
  --se-success-bg: #E9F1E7;
  --se-success-fg: #3E6B41;
  --se-success-border: #C6DCC2;
  --se-warning-bg: #F5EEDB;
  --se-warning-fg: #83601D;
  --se-warning-border: #E5D5B0;
  --se-danger-bg: #F4E9E5;
  --se-danger-fg: #8F3D33;
  --se-danger-border: #E2C6BF;
  --se-danger-strong: #8F3D33;
  --se-info-bg: #E8EDF2;
  --se-info-fg: #3E5F7E;
  --se-info-border: #C7D4E0;

  /* Diepte — warme, brede, lage schaduwen (apple-design: materiaal i.p.v. lijnen) */
  --se-shadow-sm: 0 1px 2px rgba(59, 50, 28, 0.05);
  --se-shadow-md: 0 1px 3px rgba(59, 50, 28, 0.04), 0 10px 26px rgba(59, 50, 28, 0.06);
  --se-scrim: rgba(51, 44, 28, 0.26);
  --se-scrim-frost: rgba(251, 250, 245, 0.42);

  /* Scrollbars */
  --se-scrollbar-track: #EFEBE1;
  --se-scrollbar-thumb: #D5CEBC;
  --se-scrollbar-thumb-hover: #BDB5A0;

  /* Focus ring & selectie */
  --se-focus-ring: rgba(163, 135, 79, 0.55);
  --se-selection-bg: rgba(163, 135, 79, 0.24);
  --se-selection-fg: #2B2820;
}

/* ---------------------------------------------------------------------------
   3. KLEURPROFIELEN
   Een profiel overschrijft uitsluitend de accent-familie (en optioneel de
   primaire actie). Neutrale oppervlakken, tekst en status blijven universeel,
   zodat elk profiel in dark én light direct klopt.
   --------------------------------------------------------------------------- */

/* Profiel: ocean — koel blauw accent */
html[data-color-profile="ocean"] {
  --se-accent: #3E6E9E;
  --se-accent-hover: #2F5B87;
  --se-accent-soft: rgba(62, 110, 158, 0.16);
  --se-accent-border: rgba(62, 110, 158, 0.42);
  --se-accent-contrast: #0D1B28;
  --se-primary: #2F5B87;
  --se-primary-hover: #3E6E9E;
  --se-primary-contrast: #FFFFFF;
  --se-focus-ring: rgba(62, 110, 158, 0.55);
  --se-selection-bg: rgba(62, 110, 158, 0.28);
}
html.theme-light[data-color-profile="ocean"] {
  --se-accent-soft: #E3ECF2;
  --se-accent-border: #B7CCDC;
  --se-accent-contrast: #16303F;
  --se-selection-bg: rgba(62, 110, 158, 0.18);
  --se-selection-fg: #16303F;
}

/* Profiel: forest — gedempt groen accent */
html[data-color-profile="forest"] {
  --se-accent: #5E8C5A;
  --se-accent-hover: #4C7449;
  --se-accent-soft: rgba(94, 140, 90, 0.16);
  --se-accent-border: rgba(94, 140, 90, 0.42);
  --se-accent-contrast: #12200F;
  --se-primary: #3F6338;
  --se-primary-hover: #527A49;
  --se-primary-contrast: #FFFFFF;
  --se-focus-ring: rgba(94, 140, 90, 0.55);
  --se-selection-bg: rgba(94, 140, 90, 0.28);
}
html.theme-light[data-color-profile="forest"] {
  --se-accent-soft: #E6EEE1;
  --se-accent-border: #BFD2B6;
  --se-accent-contrast: #22371C;
  --se-selection-bg: rgba(94, 140, 90, 0.18);
  --se-selection-fg: #22371C;
}

/* Profiel: graphite — neutraal, zakelijk monochroom */
html[data-color-profile="graphite"] {
  --se-accent: #6E6E6E;
  --se-accent-hover: #565656;
  --se-accent-soft: rgba(110, 110, 110, 0.16);
  --se-accent-border: rgba(110, 110, 110, 0.42);
  --se-accent-contrast: #1A1A1A;
  --se-primary: #3A3A3A;
  --se-primary-hover: #525252;
  --se-primary-contrast: #FFFFFF;
  --se-focus-ring: rgba(110, 110, 110, 0.55);
  --se-selection-bg: rgba(110, 110, 110, 0.26);
}
html.theme-light[data-color-profile="graphite"] {
  --se-accent-soft: #EAE9E6;
  --se-accent-border: #C6C4BE;
  --se-accent-contrast: #2E2E2C;
  --se-selection-bg: rgba(110, 110, 110, 0.16);
  --se-selection-fg: #2E2E2C;
}

/* ---------------------------------------------------------------------------
   4. Toegankelijkheid (apple-design §14): contrastvoorkeur van het systeem
   --------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  html.theme-light {
    --se-text: #1C1A14;
    --se-text-2: #3E3A2E;
    --se-text-muted: #5C5748;
    --se-border: #C9C3B0;
    --se-border-strong: #ABA48D;
  }
}