/* ============================================================================
   Huisstijl-basis — versie 4
   De ene basis-stylesheet van elke app (Rails en Django): kleuren, lettertype,
   tekstmaten, vormen en de opmaak van body, koppen en labels. Gewone CSS, geen
   Tailwind. Elke app laadt dit bestand als EERSTE stylesheet, als eigen <link>:

     Rails:  <%= stylesheet_link_tag "huisstijl/basis" %>   vóór tailwind
     Django: <link rel="stylesheet" href="{% static 'css/huisstijl/basis.css' %}">

   Kopieer de map ongewijzigd (basis.css + fonts/) naar app/assets/stylesheets/huisstijl/
   of static/css/huisstijl/. Pas waarden alleen hier aan, in trm-claude-tooling.
   Fonts, kleuren en tekstmaten staan NERGENS anders: niet in tailwind.config, niet
   in @theme, niet in app.css. Daar staan alleen verwijzingen naar var(--…).

   Bron: syndel-menu (application.tailwind.css en de componenten); de schaal van de
   tekstmaten (T9) is vastgesteld door de eigenaar. Eén merk: Syndle, ook nutrihub.
   ========================================================================== */

/* Inter lokaal (S10). Variabel, gewicht 100–900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2");
}

/* Kleuren in gebruik (altijd via de variabele, nooit de hexwaarde):
     tekst                 var(--on-surface)
     hulptekst, label klein var(--on-surface-variant)
     knop, actief, focus   var(--primary), tekst erop var(--on-primary)
     zacht oranje vlak     var(--primary-container), tekst erop var(--on-primary-container)
     pagina / kaart        var(--surface) / var(--surface-raised)
     lijnen                var(--outline-variant); rand van een veld var(--outline-variant)
     status                var(--success|warning|error) en -container / on-…-container */
:root,
[data-merk="syndle"] {
  /* --- Merklaag ------------------------------------------------------- */
  --primary: #f7630b;                        /* --color-primary */
  --on-primary: #ffffff;                     /* --color-on-primary */
  /* Zacht vlak: syndel-menu gebruikt bg-primary/10 met text-primary (actief menu-item,
     badge primary, iconknop-hover). */
  --primary-container: color-mix(in srgb, var(--primary) 10%, transparent);
  --on-primary-container: var(--primary);
  --brand: #f7630b;                          /* logo en accent: hetzelfde oranje */
  /* Het spectrum van het Syndle-logo, alleen voor decoratie (voortgangsbalk, staafjes).
     Bron: syndle-audit (Syndle-huisstijl). */
  --sp-gold: #F7A41F;
  --spectrum: linear-gradient(90deg, #E52528 0%, #EB5B26 22%, #F08222 44%,
                              #F7A41F 64%, #FECA0A 84%, #FAEA25 100%);

  --font: "Inter", system-ui, -apple-system, sans-serif;   /* --font-sans */
  /* Code en vaste breedte: Tailwinds font-mono, zoals syndel-menu het gebruikt. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* --- Neutraal ------------------------------------------------------- */
  --surface: #fbfaf8;                        /* --color-surface */
  --surface-raised: #ffffff;                 /* --color-surface-container-lowest */
  --surface-sunken: #f6f4f1;                 /* --color-surface-container-low */
  --surface-hover: #efede9;                  /* --color-surface-container */
  --surface-selected: #e8e5e0;               /* --color-surface-container-high */

  --on-surface: #20242a;                     /* --color-on-surface */
  --on-surface-variant: #5b6068;             /* --color-on-surface-variant */
  --outline: #b6b0a8;                        /* --color-outline */
  --outline-variant: #e5e1db;                /* --color-outline-variant */

  /* --- Status --------------------------------------------------------- */
  --error: #dc2626;                          /* --color-error */
  --on-error: #ffffff;                       /* --color-on-error */
  --error-container: #fee2e2;
  --on-error-container: #7f1d1d;

  --warning: #d97706;                        /* --color-warning */
  --warning-container: #fef1dc;
  --on-warning-container: #7a3e00;

  --success: #0e9f6e;                        /* --color-success */
  --success-container: #def7ec;
  --on-success-container: #03543f;

  --focus: var(--primary);                   /* focus:ring-primary op een veld */
  --scrim: rgb(0 0 0 / 0.4);                 /* modal backdrop:bg-black/40 */

  /* --- Vorm ----------------------------------------------------------- */
  --r-badge: 0.25rem;                        /* Tailwind rounded: badge, veld, chip */
  --r-melding: 0.375rem;                     /* rounded-md: melding, klein veld */
  --r-control: 0.5rem;                       /* --radius-navitem / rounded-lg: menu-item, iconknop */
  --r-button: 0.75rem;                       /* rounded-xl: knop */
  --r-card: 1rem;                            /* --radius-card / rounded-2xl: kaart, modal */

  --elevation-soft: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);   /* --shadow-soft */
  --elevation-raise: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* --shadow-raise */
  --elevation-pop: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* shadow-xl */

  /* --- Ruimte: de Tailwind-schaal (1 = 4px) --------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Shell ---------------------------------------------------------- */
  --shell-sidebar: 250px;                    /* --spacing-sidebar */
  --shell-topbar: 4rem;                      /* --spacing-topbar */
  --shell-gutter: var(--space-6);            /* topbar px-6 */
  --shell-gutter-mobile: var(--space-4);
  --content-narrow: 48rem;                   /* max-w-3xl */

  /* --- Tekst: alleen deze maten, elk met een rol (regel T9) ------------ */
  --text-xs: 0.75rem;                        /* 12: hulptekst, hint, code, badge, kleine knop */
  --text-sm: 0.875rem;                       /* 14: body, knop, tabel, label, menu */
  --text-base: 1rem;                         /* 16: kaarttitel (h3), appnaam naast het logo */
  --text-lg: 1.125rem;                       /* 18: h2, kop van kaart of modal */
  --text-2xl: 1.5rem;                        /* 24: h1, paginatitel */
  --text-3xl: 1.875rem;                      /* 30: groot getal (syndel-menu StatTile text-3xl) */
  --eyebrow: 11px;                           /* bovenschrift: bold, hoofdletters, tracking-wide */

  /* --- Tijd ----------------------------------------------------------- */
  --duur-snel: 150ms;                        /* Tailwind transition-colors */
  --duur-gewoon: 200ms;
}

/* --- Donker: volgt de instelling van het toestel ---------------------------
   Bron: radar (feed/static/feed/radar.css, prefers-color-scheme: dark) voor wat
   radar heeft. AFGELEID (geen bron, te bevestigen) staat erbij waar radar de
   tegenhanger niet had; de afleiding gebruikt alleen kleuren uit dit bestand. */
@media (prefers-color-scheme: dark) {
  :root,
  [data-merk="syndle"] {
    --surface: #191614;                       /* radar --grond */
    --surface-raised: #221E1B;                /* radar --vlak */
    --surface-sunken: color-mix(in srgb, var(--surface) 50%, var(--surface-raised));      /* afgeleid */
    --surface-hover: color-mix(in srgb, var(--on-surface) 8%, var(--surface-raised));     /* afgeleid */
    --surface-selected: color-mix(in srgb, var(--on-surface) 14%, var(--surface-raised)); /* afgeleid */

    --on-surface: #F4EDE6;                    /* radar --inkt */
    --on-surface-variant: #A2958A;            /* radar --zacht */
    --outline: color-mix(in srgb, var(--on-surface-variant) 50%, var(--outline-variant)); /* afgeleid */
    --outline-variant: #3A322C;               /* radar --lijn */

    --error: #F2554F;                         /* radar --rood */
    --warning: #F7A41F;                       /* radar --amber */
    --success: #6FAE86;                       /* radar --groen */
    --error-container: color-mix(in srgb, var(--error) 18%, var(--surface));       /* afgeleid */
    --warning-container: color-mix(in srgb, var(--warning) 18%, var(--surface));   /* afgeleid */
    --success-container: color-mix(in srgb, var(--success) 18%, var(--surface));   /* afgeleid */
    --on-error-container: var(--error);       /* afgeleid */
    --on-warning-container: var(--warning);   /* afgeleid */
    --on-success-container: var(--success);   /* afgeleid */

    --elevation-soft: 0 1px 2px rgb(0 0 0 / 0.4);                                   /* radar --schaduw */
    --elevation-raise: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); /* afgeleid */
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duur-snel: 0ms;
    --duur-gewoon: 0ms;
  }
}

/* --- Basisopmaak: geldt in elke app, voor elk scherm (T9) ----------------- */
/* In een eigen laag tussen Tailwinds base (preflight) en utilities: wint van de
   reset, verliest van een utility op het element zelf. De volgorde wordt hier
   vastgelegd omdat dit bestand als eerste laadt. Zonder Tailwind (Django) wint
   elke gewone regel ervan; daarom zetten huisstijl.css en app.css geen eigen
   lettertype, kleur of tekstmaat (T9, C6). */
@layer theme, base, huisstijl, components, utilities;

@layer huisstijl {
  html {
    scroll-padding-top: var(--shell-topbar);   /* sticky topbar bedekt de focus niet (A5) */
  }
  body {
    margin: 0;
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; }
  h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
  h3 { font-size: var(--text-base); font-weight: 600; line-height: 1.4; }
  label { font-size: var(--text-sm); font-weight: 500; }
  input, select, textarea, button { font: inherit; }

  /* Rollen zonder eigen HTML-element: gebruik de klasse, nooit een eigen maat (T9). */
  /* Hulptekst: hint, toelichting, bijschrift, code naast iets. syndel-menu text-xs text-on-surface-variant. */
  .hulptekst, small { font-size: var(--text-xs); font-weight: 400; color: var(--on-surface-variant); }
  /* Bovenschrift boven een blok. syndel-menu text-[11px] font-bold uppercase tracking-wide text-on-surface-variant. */
  .bovenschrift { display: block; font-size: var(--eyebrow); font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase;
    color: var(--on-surface-variant); }
  /* Groot getal: cijfer of telling als blikvanger. syndel-menu StatTile text-3xl font-bold. */
  .groot-getal { font-size: var(--text-3xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .tabular-nums { font-variant-numeric: tabular-nums; }
}