/* myspomi - Design-Tokens.
   Eigene Datei, weil sowohl das Portal als auch der Django-Admin sie
   laden. Aus dem Design-Prototyp woertlich uebernommen. */

/* ============================================================
   1. DESIGN TOKENS
   Dark Mode = Neudefinition derselben Tokens (siehe unten).
   ============================================================ */
:root{
  /* Farben – Flächen */
  --color-bg:            #f6f4f1;
  --color-surface:       #ffffff;
  --color-surface-sunk:  #efece7;
  --color-surface-alt:   #faf9f7;

  /* Farben – Linien */
  --color-border:        #e4e0d9;
  --color-border-strong: #c4bdb2;

  /* Farben – Text */
  --color-text:          #17150f;
  --color-text-muted:    #6a635a;
  --color-text-faint:    #938b80;
  --color-text-invert:   #ffffff;

  /* Marke */
  --color-primary:       #000000;
  --color-primary-hover: #2e2a25;
  --color-accent:        #426a5a;
  --color-accent-hover:  #35564a;
  --color-accent-soft:   #e8efeb;

  /* Status */
  --color-ok:            #2f6b4a;
  --color-ok-soft:       #e7f0ea;
  --color-pending:       #8a5a00;
  --color-pending-soft:  #f9efdb;
  --color-danger:        #c3121a;
  --color-danger-soft:   #fdeceb;
  --color-neutral-soft:  #eae6e0;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Typografie */
  --font-sans: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   21px;
  --text-xl:   27px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Radien – kantig wie der Shop, minimal weicher */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Schatten – warm getönt statt neutralgrau */
  --shadow-sm: 0 1px 2px rgba(35,26,15,.05), 0 1px 3px rgba(35,26,15,.06);
  --shadow-md: 0 2px 4px rgba(35,26,15,.04), 0 6px 16px rgba(35,26,15,.08);
  --shadow-lg: 0 8px 24px rgba(35,26,15,.08), 0 24px 56px rgba(35,26,15,.12);

  /* Sonstiges */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
  --tap-min: 44px;
  --dur: 120ms;
}

html[data-theme="dark"]{
  --color-bg:            #131211;
  --color-surface:       #1c1a18;
  --color-surface-sunk:  #26231f;
  --color-surface-alt:   #201e1b;

  --color-border:        #322e29;
  --color-border-strong: #4b453d;

  --color-text:          #f4f1ec;
  --color-text-muted:    #a49c91;
  --color-text-faint:    #7d766c;
  --color-text-invert:   #131211;

  --color-primary:       #f4f1ec;
  --color-primary-hover: #ffffff;
  --color-accent:        #7fb69c;
  --color-accent-hover:  #98c9b1;
  --color-accent-soft:   #223229;

  --color-ok:            #6fc48c;
  --color-ok-soft:       #1e3025;
  --color-pending:       #e0ab52;
  --color-pending-soft:  #322717;
  --color-danger:        #ff6a70;
  --color-danger-soft:   #3a1e1e;
  --color-neutral-soft:  #2c2925;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.5);
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}

/* Dieselben Tokens, wenn das Geraet auf dunkel steht und im Portal
   nichts anderes gewaehlt wurde. Der explizite Umschalter oben gewinnt
   in beide Richtungen. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --color-bg:            #131211;
    --color-surface:       #1c1a18;
    --color-surface-sunk:  #26231f;
    --color-surface-alt:   #201e1b;
  
    --color-border:        #322e29;
    --color-border-strong: #4b453d;
  
    --color-text:          #f4f1ec;
    --color-text-muted:    #a49c91;
    --color-text-faint:    #7d766c;
    --color-text-invert:   #131211;
  
    --color-primary:       #f4f1ec;
    --color-primary-hover: #ffffff;
    --color-accent:        #7fb69c;
    --color-accent-hover:  #98c9b1;
    --color-accent-soft:   #223229;
  
    --color-ok:            #6fc48c;
    --color-ok-soft:       #1e3025;
    --color-pending:       #e0ab52;
    --color-pending-soft:  #322717;
    --color-danger:        #ff6a70;
    --color-danger-soft:   #3a1e1e;
    --color-neutral-soft:  #2c2925;
  
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.5);
    --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
  }
}