/*
  Design tokens for SIDAN2.
  Brand colors (--sidan-color-*) are customer-overridable at runtime.
  Everything else (neutrals, spacing, radii, type) is product-wide.
  Naming follows the design-canvas handoff (sidan2/project/styles/tokens.css).

  Never use color literals in components/CSS — always reference var(--sidan-...).
  ADMIN renders this palette white-dominant (light bg, colored accents).
  LIVE renders the same palette color-dominant (primary bg, white surfaces),
  overriding the layout-scoped vars below in its own scope.
*/

:root {
    /* ---- Brand (overridable per customer) ---------------------------- */
    --sidan-color-primary:           #000066;   /* SIDAN primary (deep navy) */
    --sidan-color-primary-rgb:       0, 0, 102;
    --sidan-color-primary-hover:     #1a1a80;
    --sidan-color-primary-active:    #00004d;
    --sidan-color-primary-soft:      #E8E8F2;   /* light tint for backgrounds */
    --sidan-color-primary-faint:     #F1F1F8;   /* very light tint */
    --sidan-color-primary-ink:       #FFFFFF;   /* foreground on primary */
    --sidan-color-primary-contrast:  #FFFFFF;   /* alias for legacy callsites */
    --sidan-color-accent:            #15B9A2;   /* fresh accent */
    --sidan-color-light:             #226DA6;
    --sidan-color-dark:              #15181F;   /* dark brand tone */

    /* ---- Neutrals (product-wide) ------------------------------------- */
    --sidan-bg:                      #FBFBFC;
    --sidan-surface:                 #FFFFFF;
    --sidan-surface-sunk:            #F4F5F7;   /* card on white */
    --sidan-surface-row:             #FAFAFB;   /* hovered table row */
    --sidan-surface-hover:           #DFE4ED;   /* hovered nav item */

    --sidan-border:                  #E5E7EB;
    --sidan-border-strong:           #CBD0D8;

    --sidan-text:                    #15181F;
    --sidan-text-muted:              #5B6373;
    --sidan-text-subtle:             #8A92A1;
    --sidan-text-on-primary:         #FFFFFF;

    /* ---- Legacy aliases (used by older callsites; same semantics) ---- */
    --sidan-color-text:              var(--sidan-text);
    --sidan-color-text-muted:        var(--sidan-text-muted);
    --sidan-color-link:              var(--sidan-color-primary);
    --sidan-color-background:        var(--sidan-surface);
    --sidan-color-surface:           var(--sidan-surface-sunk);
    --sidan-color-border:            var(--sidan-border);

    /* ---- Status ------------------------------------------------------- */
    --sidan-success:                 #15803D;
    --sidan-success-soft:            #E6F3EA;
    --sidan-warning:                 #FF6A00;
    --sidan-warning-soft:            #FBEFDC;
    --sidan-warning-ink:             #FFFFFF;   /* foreground on warning fill */
    --sidan-danger:                  #B42318;
    --sidan-danger-soft:             #FBE9E7;
    --sidan-danger-ink:              #FFFFFF;   /* foreground on danger fill */
    --sidan-info:                    var(--sidan-color-primary);
    --sidan-info-soft:               var(--sidan-color-primary-soft);

    /* ---- Legacy status aliases --------------------------------------- */
    --sidan-color-success:           var(--sidan-success);
    --sidan-color-warning:           var(--sidan-warning);
    --sidan-color-error:             var(--sidan-danger);
    --sidan-color-info:              var(--sidan-info);

    /* ---- Timetable step types (product-wide; soft fills) --------------
       One fill per StepType, used by every timetable view (ADMIN grid, later
       LIVE). Only Durchführung — the phase that matters most — carries the
       full primary fill (with its ink for readable text); everything else
       stays a soft tint. */
    --sidan-step-preparation-bg:     #EEF1F6;
    --sidan-step-execution-bg:       var(--sidan-color-primary);
    --sidan-step-execution-ink:      var(--sidan-color-primary-ink);
    --sidan-step-selfrating-bg:      var(--sidan-step-rating-bg); /* self-rating IS the candidate's rating phase */
    --sidan-step-rating-bg:          #FBF3DC;
    --sidan-step-reflection-bg:      #E6F5F2;
    --sidan-step-welcome-bg:         var(--sidan-success-soft);
    --sidan-step-information-bg:     var(--sidan-surface-sunk);
    --sidan-step-reading-bg:         var(--sidan-surface-sunk);
    --sidan-step-pause-bg:           var(--sidan-surface-sunk);
    --sidan-step-feedbacktalk-bg:    #FAEAF0;
    --sidan-step-finalconference-bg: var(--sidan-warning-soft);
    --sidan-step-goodbye-bg:         var(--sidan-success-soft);

    /* ---- Layout-scoped colors (overridden by .live-layout) ------------ */
    --sidan-layout-bg:               var(--sidan-bg);
    --sidan-layout-text:             var(--sidan-text);
    --sidan-card-bg:                 var(--sidan-surface);
    --sidan-card-text:               var(--sidan-text);

    /* ---- Type -------------------------------------------------------- */
    --sidan-font-sans:               'Museo Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --sidan-font-mono:               ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sidan-font-family:             var(--sidan-font-sans);
    --sidan-font-weight-thin:        100;
    --sidan-font-weight-regular:     300;
    --sidan-font-weight-bold:        500;

    /* ---- Type scale (rem, scales with html root font-size) -----------
       Use these in component CSS — never set font-size in px or raw rem
       directly. Change the html font-size to scale everything at once. */
    --sidan-text-xs:                 0.75rem;
    --sidan-text-sm:                 0.875rem;
    --sidan-text-base:               1rem;
    --sidan-text-md:                 1.125rem;
    --sidan-text-lg:                 1.25rem;
    --sidan-text-xl:                 1.375rem;
    --sidan-text-2xl:                1.5rem;
    --sidan-text-3xl:                1.75rem;

    /* ---- Radii ------------------------------------------------------- */
    --sidan-radius-sm:               6px;
    --sidan-radius-md:               10px;
    --sidan-radius-lg:               14px;
    --sidan-radius-pill:             999px;   /* fully rounded — pills/chips */

    /* ---- Shadows ----------------------------------------------------- */
    --sidan-shadow-sm:               0 1px 2px rgba(20, 25, 35, 0.04), 0 1px 1px rgba(20, 25, 35, 0.03);
    --sidan-shadow-md:               0 2px 6px rgba(20, 25, 35, 0.06), 0 6px 18px rgba(20, 25, 35, 0.05);
    --sidan-shadow-lg:               0 8px 28px rgba(20, 25, 35, 0.10);
}