/* ============================================================
   Die Grünen – Design Tokens

   Source of truth: the official brand portal, extracted page by
   page in docs/marke/. Every value marked "official" below is
   taken verbatim from there, including the portal's own token
   name in the comment (the digital system renames the brand
   colors: Tanne = secondary, Klee = primary, Sand = neutral).
   Brand and motif names (Tanne, Klee, Grashalm, Sand, Himmel,
   Sonne, Balken, Störer) are proper names and stay German.

   Blocks marked PROJECT are ours. The portal defines no status
   colors, radii, shadows, motion or layout widths, so those are
   our decisions – see docs/konventionen/styleguide.md.

   Components consume ONLY these variables, no raw hex values.
   Prefer the semantic aliases (--surface-*, --text-*, --border-*,
   --interactive-*) over the raw brand colors.
   ============================================================ */
:root {
  /* ============================================================
     COLOR – official
     https://design.gruene.de/4ccd94a80/p/689b81 (digital scales)
     https://design.gruene.de/4ccd94a80/p/308085 (base colors)
     The -600 step is always the value defined in the print CD.
     ============================================================ */

  /* ---------- Tanne (portal: secondary) ----------
     The most-used green in digital: buttons, links, checkboxes,
     and in its dark steps as a background. */
  --tanne-50:  #d5eee6;
  --tanne-100: #beddd2;
  --tanne-200: #a6ccbf;
  --tanne-300: #8ebbab;
  --tanne-400: #5f9885;
  --tanne-500: #2f765e;
  --tanne-600: #005538;
  --tanne-700: #00432c;
  --tanne-800: #003221;
  --tanne-900: #002216;
  --tanne: var(--tanne-600);

  /* ---------- Klee (portal: primary) ----------
     Used sparingly in digital, currently mainly illustrations. */
  --klee-50:  #e5f3eb;
  --klee-100: #cce7d7;
  --klee-200: #b2dcc4;
  --klee-300: #99d0b0;
  --klee-400: #66b888;
  --klee-500: #33a161;
  --klee-600: #008939;
  --klee-700: #006e2e;
  --klee-800: #005222;
  --klee-900: #003717;
  --klee-950: #002911;
  --klee: var(--klee-600);

  /* ---------- Sand (portal: neutral) ----------
     Background and subtle hover. Only three steps exist. */
  --sand-500: #f7f4ed;
  --sand-600: #f5f1e9;
  --sand-700: #efe8db;
  --sand: var(--sand-600);

  /* ---------- Grey ----------
     Backgrounds and text color for secondary content. */
  --white:    #ffffff;
  --grey-50:  #f9fafb;
  --grey-100: #f3faf6;
  --grey-200: #e6ecea;
  --grey-300: #d1dbda;
  --grey-400: #9cabaf;
  --grey-500: #6b7a80;
  --grey-600: #4b5d63;
  --grey-700: #374951;
  --grey-800: #1f2f37;
  --grey-900: #111e27;
  --grey-950: #031112;
  --black:    #000000;

  /* ---------- Himmel ----------
     Illustrations and Störer. */
  --himmel-500: #3cb4e4;
  --himmel-600: #0ba1dd;
  --himmel-700: #0981b1;
  --himmel: var(--himmel-600);

  /* ---------- Grashalm ----------
     No digital use defined yet, the steps exist if needed. */
  --grashalm-500: #a1ca50;
  --grashalm-600: #8abd24;
  --grashalm-700: #6e971d;
  --grashalm: var(--grashalm-600);

  /* ---------- Sonne (portal: sun) ----------
     Reserved for the sunflower, otherwise illustrations only. */
  --sonne-600: #fff17a;
  --sonne: var(--sonne-600);

  /* ---------- Further colors (official, print-side) ----------
     Listed for completeness, not for UI surfaces. */
  --kampagne-hell-muted: #6ccd87;
  --kampagne-magenta:    #e6007e;  /* Störer elements ONLY */
  --dunkelgrau:          #2e2e3d;  /* digital only, stronger contrast */

  /* ============================================================
     COLOR – PROJECT: functional
     The portal defines no status colors. These are ours and are
     used functionally only, never as a design color.
     ============================================================ */
  --danger:     #c8372d;
  --danger-bg:  #fbeae8;
  --warning:    #e5a100;
  --warning-bg: #fdf3dd;
  --success:    var(--klee-600);
  --success-bg: var(--klee-50);
  --info:       var(--himmel-600);
  --info-bg:    #d6eef9;

  /* ============================================================
     COLOR – PROJECT: semantic aliases
     Use these in components and layouts.
     ============================================================ */

  /* surfaces */
  --surface-page:         var(--sand-600);   /* default light background */
  --surface-card:         var(--white);      /* cards, inputs */
  --surface-subtle:       var(--sand-500);
  --surface-hover:        var(--sand-700);   /* the portal's subtle hover */
  --surface-inverse:      var(--tanne-600);  /* dark brand background */
  --surface-inverse-deep: var(--tanne-900);
  --surface-accent:       var(--grashalm-600);
  --surface-sun:          var(--sonne-600);

  /* text – the portal's text styles are all set in black,
     greys carry secondary content */
  --text-body:          var(--black);
  --text-heading:       var(--black);
  --text-brand:         var(--tanne-600);  /* headline in brand color */
  --text-muted:         var(--grey-600);   /* captions, hints */
  --text-subtle:        var(--grey-500);   /* role titles, photo credits */
  --text-link:          var(--tanne-600);
  --text-on-dark:       var(--sand-600);
  --text-on-dark-muted: var(--tanne-200);
  --text-on-sun:        var(--black);

  /* interactive – Tanne carries buttons, links, checkboxes */
  --interactive:          var(--tanne-600);
  --interactive-hover:    var(--tanne-700);
  --interactive-active:   var(--tanne-800);
  --interactive-disabled: var(--grey-300);

  /* lines and dividers */
  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--tanne-600);
  --border-on-dark: var(--tanne-400);

  /* focus – a solid outline needs 3:1 against its surface: Himmel 700 on Sand
     and white, Sand on the dark brand background */
  --focus-ring:         var(--himmel-700);
  --focus-ring-on-dark: var(--sand-600);

  /* campaign media – an icon in this colour next to the label, so colour is never the only signal.
     No Himmel (Störer and focus only) and no Sonne (sunflower only). */
  --medium-online: var(--klee-600);
  --medium-phone:  var(--tanne-900);
  --medium-post:   var(--grashalm-700);
  --medium-social: var(--tanne-400);

  /* avatars – background and initials, each pair at least 4.5:1 (docs/adrs/0020-profil-mit-avatar.md).
     No Himmel (Störer and focus only), no Sonne (sunflower only). */
  --avatar-tanne-bg:        var(--tanne-600);
  --avatar-tanne-text:      var(--sand-600);
  --avatar-tanne-dark-bg:   var(--tanne-900);
  --avatar-tanne-dark-text: var(--sand-600);
  --avatar-klee-bg:         var(--klee-700);
  --avatar-klee-text:       var(--white);
  --avatar-klee-light-bg:   var(--klee-200);
  --avatar-klee-light-text: var(--tanne-900);
  --avatar-grashalm-bg:     var(--grashalm-600);
  --avatar-grashalm-text:   var(--tanne-900);
  --avatar-sand-bg:         var(--sand-700);
  --avatar-sand-text:       var(--tanne-600);
  --avatar-away-bg:         var(--grey-200);
  --avatar-away-text:       var(--grey-700);

  /* sidebar on the dark brand background */
  --sidebar-link-hover:  var(--tanne-700);
  --sidebar-link-active: var(--tanne-500);
  --sidebar-link-marker: var(--grashalm-600);

  /* ============================================================
     TYPOGRAPHY – official
     https://design.gruene.de/4ccd94a80/p/93942a (digital tokens)
     https://design.gruene.de/4ccd94a80/p/24c194 (the two fonts)
     Two faces, no third. GrueneType Neue replaced the GrueneType
     in May 2025; the old font must not be used any more.
     ============================================================ */
  --font-display: "GrueneType Neue", "GrueneTypeNeue-Regular", sans-serif;
  --font-body:    "PT Sans", system-ui, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --fw-display:    400;  /* GrueneType Neue has one weight */
  --fw-body:       400;
  --fw-body-bold:  700;

  /* display, GrueneType Neue – large headlines and claims only,
     never body copy (portal tokens g-xxxl … g-l) */
  --fs-display-xxxl: 5rem;      /* 80px */
  --fs-display-xxl:  3.75rem;   /* 60px */
  --fs-display-xl:   2.5rem;    /* 40px */
  --fs-display-l:    1.875rem;  /* 30px */
  --lh-display:      1.1;       /* 110 % for all four */

  /* body, PT Sans (portal tokens g-body-*) */
  --fs-body-l:  1.5625rem;  /* 25px */
  --fs-body:    1.25rem;    /* 20px */
  --fs-body-m:  1.125rem;   /* 18px */
  --fs-body-s:  1rem;       /* 16px */
  --fs-body-xs: 0.8125rem;  /* 13px */
  --lh-body-l:  1.34;
  --lh-body:    1.75;  /* 35px on 20px */
  --lh-body-m:  1.56;  /* 28px on 18px */
  --lh-body-s:  1.5;
  --lh-body-xs: 1.6;

  /* sub-headlines, PT Sans bold (portal tokens g-subheadline-*)
     same sizes as body, weight 700 */
  --fs-subheadline-l:  var(--fs-body-l);
  --fs-subheadline:    var(--fs-body);
  --fs-subheadline-m:  var(--fs-body-m);
  --fs-subheadline-s:  var(--fs-body-s);
  --fs-subheadline-xs: var(--fs-body-xs);
  --lh-subheadline:    1.3;
  --lh-subheadline-xs: 1.6;

  /* UI, PT Sans (portal tokens g-button-*, g-input*) */
  --fs-button-l:     1rem;       /* 16px */
  --fs-button-m:     0.75rem;    /* 12px */
  --lh-button:       1;
  --ls-button-m:     0.1px;
  --fs-input:        1rem;       /* 16px */
  --lh-input:        1.2;
  --fs-input-label:  1rem;       /* 16px */
  --lh-input-label:  1.3;
  --fs-input-helper: 0.8125rem;  /* 13px */
  --lh-input-helper: 1.2;

  --ls-body: 0;

  /* ============================================================
     SPACING – official
     https://design.gruene.de/4ccd94a80/p/10d5e5
     Named by px value, exactly the portal's $spacing scale.
     ============================================================ */
  --space-0:   0;
  --space-2:   0.125rem;
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-56:  3.5rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-160: 10rem;

  /* ============================================================
     PROJECT: shape, elevation, motion, layout
     None of this is defined in the portal.
     ============================================================ */

  /* radii – deliberately tight, the brand reads as a sharp rectangle */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-full: 9999px;  /* Störer, avatar, sunflower center */

  /* lines */
  --border-width:        1.5px;
  --border-width-strong: 2.5px;

  /* shadows – minimal, only to lift cards and menus off Sand */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(0, 85, 56, 0.08);
  --shadow-md:    0 4px 14px rgba(0, 85, 56, 0.10);
  --shadow-lg:    0 12px 32px rgba(0, 85, 56, 0.14);
  --shadow-focus: 0 0 0 3px rgba(11, 161, 221, 0.45);  /* Himmel ring */

  /* signature tilts – Störer 7° is official, the Balken skew is
     from the print CD and has no portal page */
  --tilt-stoerer: -7deg;
  --skew-balken:  -12deg;

  /* motion – purposeful, fast, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* layout */
  --container-max:    1200px;
  --container-narrow: 720px;

  /* sidebar – the brand block keeps one height in both states, so the menu never moves */
  --sidebar-width:           16rem;
  --sidebar-width-collapsed: 4.5rem;
  --sidebar-brand-height:    5rem;
  --fs-wordmark-vertical:    1.5rem;  /* below --fs-display-l on purpose, see docs/konventionen/styleguide.md */
}