/* ================================
   KWIT – Design System (Light only)
   Version: 2.0
   Font: Montserrat
   Date: February 2026
   ================================= */

/* ---------- Core tokens ---------- */
:root {
    /* Font family */
    --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI",
      "Helvetica Neue", Arial, sans-serif;
  
    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
  
    /* -------- Text colors -------- */
    --text-secondary: #C8D2DC;  /* Secondary text */
    --text-body: #6C7984;       /* Main text */
    --text-title: #4A4A4A;      /* Titles */
    --text-on-color: #FFFFFF;   /* Text on colorful backgrounds */
    --text-accent: #00D68B;     /* Titles / highlighted text */
  
    /* -------- Backgrounds / Surfaces -------- */
    --bg-app: #FFFFFF;
  
    --surface-cell: #FFFFFF;    /* Cells */
    --surface-empty: #F4F5F6;   /* Empty states */
  
    /* ---------- Typography scale ---------- */
    /* Header */
    --fs-main-header: 30px;
    --lh-main-header: 35px;
  
    --fs-emph-main: 30px;
    --lh-emph-main: 33px;
  
    --fs-header: 24px;
    --lh-header: 35px;
  
    --fs-content-header: 16px;
    --lh-content-header: 24px;
  
    /* Emphasized */
    --fs-emph-content: 16px;
    --lh-emph-content: 24px;
  
    --fs-emph-info: 14px;
    --lh-emph-info: 21px;
  
    --fs-emph-secondary: 12px;
    --lh-emph-secondary: 18px;
  
    --fs-emph-mini: 10px;
    --lh-emph-mini: 15px;
  
    /* Normal */
    --fs-content: 16px;
    --lh-content: 24px;
  
    --fs-info: 14px;
    --lh-info: 21px;
  
    --fs-secondary-info: 12px;
    --lh-secondary-info: 18px;
  
    --fs-mini-content: 10px;
    --lh-mini-content: 15px;
  
    --fs-mini-info: 8px;
    --lh-mini-info: 12px;
  
    /* Numerics */
    --fs-giga-number: 50px;
    --lh-giga-number: 60px;
  }
  
  /* ================================
     Base
     ================================= */
  html, body {
    background: var(--bg-app);
    color: var(--text-body);
    font-family: var(--font-sans);
  }
  
  /* ================================
     Text color helpers
     ================================= */
  .text-title { color: var(--text-title); }
  .text-body { color: var(--text-body); }
  .text-secondary { color: var(--text-secondary); }
  .text-on-color { color: var(--text-on-color); }
  .text-accent { color: var(--text-accent); }
  
  /* ================================
     Surface helpers
     ================================= */
  .surface-cell { background: var(--surface-cell); }
  .surface-empty { background: var(--surface-empty); }
  
  /* ================================
     Typography presets
     ================================= */
  .typo-main-header {
    font-size: var(--fs-main-header);
    line-height: var(--lh-main-header);
    font-weight: var(--fw-bold);
  }
  
  .typo-emph-main {
    font-size: var(--fs-emph-main);
    line-height: var(--lh-emph-main);
    font-weight: var(--fw-bold);
  }
  
  .typo-header {
    font-size: var(--fs-header);
    line-height: var(--lh-header);
    font-weight: var(--fw-semibold);
  }
  
  .typo-content-header {
    font-size: var(--fs-content-header);
    line-height: var(--lh-content-header);
    font-weight: var(--fw-semibold);
  }
  
  .typo-emph-content {
    font-size: var(--fs-emph-content);
    line-height: var(--lh-emph-content);
    font-weight: var(--fw-semibold);
  }
  
  .typo-emph-info {
    font-size: var(--fs-emph-info);
    line-height: var(--lh-emph-info);
    font-weight: var(--fw-medium);
  }
  
  .typo-emph-secondary {
    font-size: var(--fs-emph-secondary);
    line-height: var(--lh-emph-secondary);
    font-weight: var(--fw-medium);
  }
  
  .typo-emph-mini {
    font-size: var(--fs-emph-mini);
    line-height: var(--lh-emph-mini);
    font-weight: var(--fw-medium);
  }
  
  .typo-content {
    font-size: var(--fs-content);
    line-height: var(--lh-content);
    font-weight: var(--fw-regular);
  }
  
  .typo-info {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-regular);
  }
  
  .typo-secondary-info {
    font-size: var(--fs-secondary-info);
    line-height: var(--lh-secondary-info);
    font-weight: var(--fw-regular);
  }
  
  .typo-mini-content {
    font-size: var(--fs-mini-content);
    line-height: var(--lh-mini-content);
    font-weight: var(--fw-regular);
  }
  
  .typo-mini-info {
    font-size: var(--fs-mini-info);
    line-height: var(--lh-mini-info);
    font-weight: var(--fw-regular);
  }
  
  .typo-giga-number {
    font-size: var(--fs-giga-number);
    line-height: var(--lh-giga-number);
    font-weight: var(--fw-bold);
  }
  
  /* ================================
     Cards & Glass Effect
     ================================= */
  .glass-card {
    background: white;
    border: 1px solid #CBD5E1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
  }
  
  .glass-card:hover {
    border-color: var(--text-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  /* ================================
     Utility classes (Tailwind compatibility)
     ================================= */
  .text-kwit {
    color: var(--text-accent);
  }
  
  .bg-kwit {
    background-color: var(--text-accent);
  }
  
  .border-kwit {
    border-color: var(--text-accent);
  }
  
  /* ================================
     Buttons
     ================================= */
  .btn-primary, .primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--text-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
  }
  
  .btn-primary:hover:not(:disabled), .primary-btn:hover:not(:disabled) {
    background-color: #00BF7D;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .btn-primary:disabled, .primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .btn-secondary, .secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: white;
    color: var(--text-body);
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
  }
  
  .btn-secondary:hover:not(:disabled), .secondary-btn:hover:not(:disabled) {
    background-color: var(--surface-cell);
    border-color: var(--text-accent);
    color: var(--text-accent);
  }
  
  .btn-secondary:disabled, .secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .btn-kwit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--text-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
  }
  
  .btn-kwit:hover:not(:disabled) {
    background-color: #00BF7D;
  }
  
  .btn-kwit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }