/*
 * design-tokens.css
 * Sandhedens kilde — alle design tokens for Digirehab-temaet.
 * Ingenting hardcodes andre steder.
 */

:root {

  /* ============================================================
     FARVER
  ============================================================ */

  /* Primære farver */
  --color-primary:          #1E5A4B;
  --color-primary-light:    #73AF80;
  --color-accent:           #E89D34;

  /* Tekstfarver */
  --color-text-primary:     #222222;
  --color-text-secondary:   #363636;
  --color-text-disabled:    #999999;
  --color-text-white:       #FFFFFF;

  /* Baggrunde */
  --color-bg-page:          #F2F2F2;   /* Sidens ydre baggrund */
  --color-bg-card:          #FAFAFA;   /* Floating kort / hvid baggrund */
  --color-bg-section:       #E6E3D7;   /* Mørkere sand — undgå, brug bg-inactive */
  --color-bg-inactive:      #EDEAE3;   /* ✓ Sand-baggrund — standard for sektioner med farvet bg */

  /* Interaktion — primær knap */
  --color-primary-hover:    #16453a;
  --color-primary-active:   #0f2e27;
  --color-focus-ring:       rgba(30, 90, 75, 0.1);

  /* Border */
  --color-border:           #e0ddd4;
  --color-border-input:     #d4d1c8;

  /* Status */
  --color-danger:           #c0392b;
  --color-danger-bg:        #fde8e8;
  --color-warning-bg:       #fdefd8;
  --color-warning-text:     #9a6b10;
  --color-success-bg:       #d4ede0;
  --color-info-bg:          #e3eef9;
  --color-info-text:        #1a5fa8;
  --color-neutral-bg:       #EDEAE3;
  --color-neutral-text:     #4a4845;

  /* Badge-farver */
  --color-badge-webinar:    #4A3F6B;
  --color-badge-case:       #4A6B8A;

  /* ============================================================
     TYPOGRAFI
  ============================================================ */

  --font-family:            'Inter', sans-serif;

  /* Størrelser */
  --font-size-display:      70px;
  --font-size-h1:           56px;
  --font-size-h2:           42px;
  --font-size-h3:           28px;
  --font-size-h4:           20px;
  --font-size-body:         16px;
  --font-size-secondary:    14px;
  --font-size-caption:      12px;
  --font-size-button:       15px;
  --font-size-label:        13px;

  /* Vægt */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;

  /* Linjehøjde */
  --line-height-display:    1.1;
  --line-height-h1:         1.15;
  --line-height-h2:         1.2;
  --line-height-h3:         1.25;
  --line-height-h4:         1.35;
  --line-height-body:       1.65;
  --line-height-secondary:  1.6;
  --line-height-caption:    1.5;
  --line-height-button:     1;

  /* Letter-spacing */
  --letter-spacing-display: -0.02em;
  --letter-spacing-h1:      -0.015em;
  --letter-spacing-h2:      -0.01em;
  --letter-spacing-h3:      -0.005em;
  --letter-spacing-h4:      0em;
  --letter-spacing-body:    0em;
  --letter-spacing-caption: 0.04em;
  --letter-spacing-button:  0.01em;

  /* ============================================================
     SPACING (base: 4px)
  ============================================================ */

  --space-xs:     4px;
  --space-sm:     8px;
  --space-sm-plus: 12px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-2xl:    48px;
  --space-3xl:    64px;
  --space-4xl:    96px;

  /* Indholdsbrede */
  --max-width-content:  1400px;
  --max-width-text:     680px;

  /* Side-padding */
  --padding-page-desktop: 32px;
  --padding-page-tablet:  24px;
  --padding-page-mobile:  16px;

  /* ============================================================
     BORDER-RADIUS
  ============================================================ */

  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-pill:  9999px;

  /* Knap-radius pr. størrelse */
  --radius-btn-sm: 6px;
  --radius-btn-md: 8px;
  --radius-btn-lg: 10px;

  /* ============================================================
     KOMPONENTER — KNAPPER
  ============================================================ */

  --btn-height-sm:    32px;
  --btn-height-md:    40px;
  --btn-height-lg:    48px;
  --btn-padding-sm:   0 12px;
  --btn-padding-md:   0 16px;
  --btn-padding-lg:   0 24px;

  /* ============================================================
     KOMPONENTER — INPUT
  ============================================================ */

  --input-height:     40px;
  --input-radius:     8px;
  --input-border:     1.5px solid var(--color-border-input);
  --input-bg:         var(--color-bg-card);
  --input-padding:    0 12px;

  /* ============================================================
     KOMPONENTER — KORT
  ============================================================ */

  --card-bg:          var(--color-bg-card);
  --card-border:      0.5px solid var(--color-border);
  --card-radius:      var(--radius-md);
  --card-padding:     20px;
  --shadow-card:      0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.10);

  /* Gennemsigtige overlays til mørkegrønne sektioner */
  --overlay-white-faint: rgba(255, 255, 255, 0.08);
  --overlay-white-muted: rgba(255, 255, 255, 0.75);

  /* ============================================================
     KOMPONENTER — NAVIGATION/SIDEBAR
  ============================================================ */

  --nav-bg:           var(--color-primary);
  --nav-width:        230px;
  --nav-padding:      16px 12px;
  --nav-item-padding: 9px 12px;
  --nav-item-radius:  var(--radius-sm);
  --nav-font-size:    13px;
  --nav-active-bg:    rgba(255, 255, 255, 0.15);
  --nav-hover-bg:     rgba(255, 255, 255, 0.1);
  --nav-text-active:  #FFFFFF;
  --nav-text-inactive: rgba(255, 255, 255, 0.75);
  --nav-label-text:   rgba(255, 255, 255, 0.4);

  /* Topnavigation (alternativ) */
  --topnav-bg:        var(--color-bg-card);
  --topnav-border:    border-bottom 0.5px solid var(--color-border);
  --topnav-height:    72px;

  /* ============================================================
     MOTION & ANIMATION
  ============================================================ */

  --duration-fast:      100ms;
  --duration-base:      200ms;
  --duration-enter:     300ms;
  --duration-progress:  600ms;

  --easing-out:         ease-out;
  --easing-in-out:      ease-in-out;

  /* ============================================================
     IKONER (Lucide Icons)
  ============================================================ */

  --icon-size-inline:   16px;
  --icon-size-button:   20px;
  --icon-size-standard: 24px;
  --icon-size-large:    32px;
  --icon-stroke:        1.5px;

  /* ============================================================
     GRID & BREAKPOINTS
  ============================================================ */

  --grid-gap-desktop:   24px;
  --grid-gap-mobile:    16px;
  --grid-card-min:      280px;

  --sidebar-width:      230px;

}

/* Respekter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}