/* ==========================================================================
   Route 66 – Kundendesign (Ebene 4b · Projekt)
   --------------------------------------------------------------------------
   Wird von snippets/baukasten/head.php automatisch geladen, sobald die Datei
   hier liegt. Der Layer „project“ kommt zuletzt und gewinnt damit gegen OPUI,
   ohne !important und unabhängig von der Spezifität.

   Werte 1:1 aus dem freigegebenen Entwurf docs/route66-seitenentwurf22.html.

   GRUNDREGEL (aus dem Entwurf)
   Akzente kommen aus der Palette, Flächen NICHT. Läuft --palette-source
   auf Farbton 87, färbt OPUI sonst alle Oberflächen bräunlich ein.
   Die Flächen stehen deshalb als eigene Navy-Skala fest.
   ========================================================================== */

/* Schrift: Rubik, lokal ausgeliefert (kein Google Fonts – DSGVO) ------------
   Variable Schrift, freigegeben ist der Bereich, den Entwurf und OPUI nutzen:
   400 Fließtext · 500/600 OPUI-Komponenten, Liedtitel · 700 Überschriften.
   Lizenz: SIL Open Font License, siehe /assets/fonts/rubik/OFL.txt */
@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/rubik/rubik-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: Rubik;
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/rubik/rubik-latin-wght-italic.woff2") format("woff2");
}

@layer project {

  .ui-light { --color-scheme: light; }
  .ui-dark  { --color-scheme: dark; }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    --font-sans: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;

    --palette-source: oklch(0.58 0.174 87);
    --palette-hue-rotate-by: 0;

    /* Marke */
    --sunflower: #ffc500;
    --sage: #8fb183;
    --sage-contrast: #16241a;

    --blue: oklch(from var(--color-9) l 0.2 210);
    --green: oklch(from var(--color-9) l 0.2 145);
    --orange: oklch(from var(--color-7) l 0.2 75);
    --red: oklch(from var(--color-9) l 0.2 25);

    --success: var(--green);
    --info: var(--blue);
    --warning: var(--orange);
    --critical: var(--red);
    --neutral: var(--color-9);

    /* Volle Band = Gelb. Auf #ffc500 ist der automatische Kontrast
       unlesbar, deshalb --primary-contrast von Hand. */
    --primary: var(--sunflower);
    --primary-light: oklch(from var(--primary) calc(l * 1.08) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.82) c h);
    --primary-contrast: #2a1c00;

    /* Flächen – feste Navy-Skala, unabhängig von der Quellfarbe */
    --surface-default:  light-dark(#f6f7f9, #112233);
    --surface-tonal:    light-dark(#ecf0f4, #17293c);
    --surface-elevated: light-dark(#ffffff, #0d1b2a);
    --surface-filled:   light-dark(#e0e6ec, #213950);

    --text-primary: light-dark(#10202f, #eef2f7);
    --text-primary-contrast: light-dark(#eef2f7, #10202f);
    --text-muted: light-dark(#55636f, #93a1b2);
    --text-muted-contrast: light-dark(#93a1b2, #55636f);

    --border-color: light-dark(#ccd3dc, #2b415a);
    --border-radius: var(--radius-2);   /* in OPUI 5.4.x = 5px */
    --border-width: 1px;

    --focus-ring-color: var(--primary);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-style: solid;

    --font-size-h1: var(--font-size-fluid-3);
    --font-size-h2: var(--font-size-fluid-2);
    --font-size-h3: var(--font-size-fluid-1);

    --control-size: 40px;
    --control-size-large: 46px;
    --button-size: var(--control-size);
    --button-size-large: var(--control-size-large);
    --button-border-radius: var(--radius-2);
    --field-border-radius: var(--radius-2);
    --field-border-color: var(--border-color);
  }

  /* Trio und Journal = Sage. Tauscht NUR den Akzent, nicht die Flächen. */
  :where(.r66-sage) {
    --primary: var(--sage);
    --primary-light: oklch(from var(--sage) calc(l * 1.1) c h);
    --primary-dark: oklch(from var(--sage) calc(l * 0.75) c h);
    --primary-contrast: var(--sage-contrast);
  }

  /* OPUI rechnet die Schriftfarbe von .ui-primary selbst aus – auf Gelb
     unlesbar. Deshalb zurück auf --primary-contrast. */
  .ui-button.ui-primary {
    --_color-contrast: var(--primary-contrast);
  }

  /* Dunkle Section auf Navy statt auf das Grau des Plugins (kein reines
     Schwarz). In der dunklen Section ist --surface-default = #112233. */
  .section[data-bg="dark"] {
    --section-bg: var(--surface-default);
  }
}