/* ============================================================
   InfoMediaBD Design System — CSS Variables
   Light mode (default) + Dark mode override under .dark
   ============================================================ */

:root {
  /* Brand */
  --color-primary:                  #16a34a;
  --color-primary-fixed:            #7ffc97;
  --color-primary-fixed-dim:        #62df7d;
  --color-primary-container:        #00873a;
  --color-on-primary:               #ffffff;
  --color-on-primary-container:     #f7fff2;

  --color-secondary:                #0051d5;
  --color-secondary-container:      #316bf3;
  --color-on-secondary:             #ffffff;
  --color-on-secondary-container:   #fefcff;

  --color-tertiary:                 #a72d51;
  --color-tertiary-container:       #c74668;
  --color-on-tertiary-container:    #fffbff;

  /* Surface */
  --color-surface:                  #f4fcf0;
  --color-surface-dim:              #d5dcd1;
  --color-surface-bright:           #f4fcf0;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #eff6ea;
  --color-surface-container:        #e9f0e5;
  --color-surface-container-high:   #e3eadf;
  --color-surface-container-highest:#dde5d9;
  --color-surface-variant:          #dde5d9;

  /* On-surface */
  --color-on-surface:               #171d16;
  --color-on-surface-variant:       #3e4a3d;
  --color-background:               #f4fcf0;
  --color-on-background:            #171d16;

  /* Outline */
  --color-outline:                  #6e7b6c;
  --color-outline-variant:          #bdcaba;

  /* Legacy compat */
  --bg-primary:   #f4fcf0;
  --bg-secondary: #eff6ea;
  --text-primary: #171d16;
  --text-secondary: #3e4a3d;
  --card-bg:      #ffffff;
  --border:       #bdcaba;
  --accent:       #16a34a;
}

/* ============================================================
   DARK MODE — flip all tokens
   ============================================================ */
html.dark {
  --color-primary:                  #62df7d;
  --color-primary-fixed:            #00391a;
  --color-primary-fixed-dim:        #00531f;
  --color-primary-container:        #00531f;
  --color-on-primary:               #003910;
  --color-on-primary-container:     #7ffc97;

  --color-secondary:                #adc6ff;
  --color-secondary-container:      #002ea6;
  --color-on-secondary:             #002ea6;
  --color-on-secondary-container:   #dce1ff;

  --color-tertiary:                 #ffb0c8;
  --color-tertiary-container:       #871337;
  --color-on-tertiary-container:    #ffd9e3;

  --color-surface:                  #0f1510;
  --color-surface-dim:              #0f1510;
  --color-surface-bright:           #343b30;
  --color-surface-container-lowest: #090f0b;
  --color-surface-container-low:    #171d16;
  --color-surface-container:        #1b221a;
  --color-surface-container-high:   #252c24;
  --color-surface-container-highest:#303830;
  --color-surface-variant:          #3e4a3d;

  --color-on-surface:               #dde5d9;
  --color-on-surface-variant:       #c1cebe;
  --color-background:               #0f1510;
  --color-on-background:            #dde5d9;

  --color-outline:                  #8b9a88;
  --color-outline-variant:          #3e4a3d;

  /* Legacy compat */
  --bg-primary:   #0f1510;
  --bg-secondary: #1b221a;
  --text-primary: #dde5d9;
  --text-secondary: #c1cebe;
  --card-bg:      #1b221a;
  --border:       #3e4a3d;
  --accent:       #62df7d;
}

/* ============================================================
   Base
   ============================================================ */
html { scroll-behavior: smooth; }
body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================================
   Utility extras
   ============================================================ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card {
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.75rem;
}
.card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}