/* =============================================================================
   VETInnovate Design Tokens v1.0
   3-tier token system: Primitives → Semantic → Component
   Generated: 2026-04-24
   ============================================================================= */

:root {

  /* ===========================================================================
     TIER 1 — PRIMITIVES (raw values, never use directly in components)
     =========================================================================== */

  /* --- Color: Navy palette (brand) --- */
  --navy-900: #1e3a5f;     /* Primary brand */
  --navy-700: #2a5080;     /* Primary hover */
  --navy-600: #345e94;
  --navy-100: #eef3fb;     /* Selected/active bg */
  --navy-50:  #f0f4ff;     /* Subtle hover */

  /* --- Color: Blue palette (accent) --- */
  --blue-500: #2196F3;     /* Accent */
  --blue-700: #1565c0;     /* Info text */
  --blue-100: #e3f2fd;     /* Info bg */
  --blue-200: #90caf9;     /* Info border */

  /* --- Color: Green palette (success) --- */
  --green-700: #2e7d32;    /* Success text */
  --green-600: #2d8a4e;    /* Complete/check */
  --green-500: #66bb6a;    /* Score high */
  --green-400: #16a34a;    /* Alt success */
  --green-200: #a5d6a7;    /* Success border */
  --green-100: #c8e6c9;    /* Complete border (mobile) */
  --green-50:  #e8f5e9;    /* Success bg */
  --green-25:  #f1f8f2;    /* Complete bg (mobile) */

  /* --- Color: Red palette (error/danger) --- */
  --red-700:   #c62828;    /* Error text */
  --red-500:   #ef5350;    /* Score low */
  --red-400:   #e53935;    /* Required asterisk */
  --red-300:   #dc2626;    /* Alt error */
  --red-200:   #ef9a9a;    /* Error border */
  --red-50:    #ffebee;    /* Error bg */

  /* --- Color: Orange/Amber palette (warning) --- */
  --orange-800: #e65100;   /* Warning text */
  --orange-500: #ffa726;   /* Score mid */
  --orange-400: #f59e0b;   /* Alt warning */
  --orange-300: #ffd9a8;   /* Warning border, rec card border */
  --orange-200: #ffcc80;   /* Warning border alt */
  --orange-100: #fef3c7;   /* Badge bg */
  --orange-50:  #fff3e0;   /* Warning bg */
  --orange-25:  #fff8f0;   /* Rec card bg */
  --amber-900:  #92400e;   /* Badge text */
  --amber-700:  #c47a00;   /* Rec score text */
  --amber-200:  #ffd54f;   /* Recommend border */
  --amber-50:   #fff8e1;   /* Recommend bg */

  /* --- Color: Neutral palette --- */
  --gray-900: #333333;     /* Text primary */
  --gray-700: #555555;     /* Text secondary (darker) */
  --gray-600: #666666;     /* Text secondary */
  --gray-500: #888888;     /* Muted text */
  --gray-300: #cccccc;     /* Hover border */
  --gray-200: #e0e0e0;     /* Border default */
  --gray-150: #e8e8e8;     /* Track/divider bg */
  --gray-100: #eeeeee;     /* Separator */
  --gray-75:  #f0f0f0;     /* Alt bg */
  --gray-50:  #f5f7fa;     /* Surface bg */
  --gray-25:  #fafafa;     /* Hover bg subtle */
  --white:    #ffffff;

  /* --- Spacing scale (base-4) --- */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-9:   18px;
  --space-10:  20px;
  --space-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-18:  36px;
  --space-20:  40px;
  --space-24:  48px;
  --space-30:  60px;
  --space-60:  120px;

  /* --- Type scale --- */
  --text-2xs:  0.75rem;    /* 12px - fine print, badges */
  --text-xs:   0.82rem;    /* ~13px - labels, captions */
  --text-sm:   0.88rem;    /* ~14px - body small, cards */
  --text-base: 0.93rem;    /* ~15px - body default */
  --text-md:   1rem;       /* 16px - card titles */
  --text-lg:   1.15rem;    /* ~18px - section labels */
  --text-xl:   1.35rem;    /* ~22px - page titles */
  --text-2xl:  1.5rem;     /* 24px - major headings */
  --text-3xl:  1.6rem;     /* ~26px - hero headings */

  /* --- Font weights --- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Line heights --- */
  --leading-tight:   1.3;
  --leading-normal:  1.4;
  --leading-relaxed: 1.55;
  --leading-loose:   1.7;

  /* --- Border radius --- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-base: 8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-pill:  20px;
  --radius-round: 50%;

  /* --- Shadows --- */
  --shadow-sm:   0 2px 12px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:   0 6px 24px rgba(0,0,0,.10);

  /* --- Motion --- */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;
  --ease-default:  ease;
  --ease-out:      ease-out;

  /* --- Z-index --- */
  --z-base:    1;
  --z-dropdown: 10;
  --z-sticky:  100;
  --z-modal:   1000;
  --z-toast:   1100;


  /* ===========================================================================
     TIER 2 — SEMANTIC (purpose-mapped, use in layouts & composition)
     =========================================================================== */

  /* --- Brand --- */
  --vi:        var(--navy-900);
  --vi-lt:     var(--navy-700);
  --vi-acc:    var(--blue-500);

  /* --- Text --- */
  --vi-txt:    var(--gray-900);
  --vi-txt2:   var(--gray-600);
  --vi-txt3:   var(--gray-500);

  /* --- Surface & Layout --- */
  --vi-w:      var(--white);
  --vi-bg:     var(--gray-50);
  --vi-bdr:    var(--gray-200);

  /* --- Interactive states --- */
  --color-selected:     var(--navy-100);
  --color-hover:        var(--gray-25);
  --color-hover-border: var(--gray-300);
  --color-focus:        var(--blue-500);
  --color-disabled-bg:  var(--gray-150);
  --color-disabled-txt: var(--gray-500);

  /* --- Status: Success --- */
  --color-success:        var(--green-700);
  --color-success-bg:     var(--green-50);
  --color-success-border: var(--green-200);
  --color-complete:       var(--green-600);
  --color-complete-bg:    var(--green-25);
  --color-complete-border:var(--green-100);

  /* --- Status: Error --- */
  --color-error:        var(--red-700);
  --color-error-bg:     var(--red-50);
  --color-error-border: var(--red-200);

  /* --- Status: Warning --- */
  --color-warning:        var(--orange-800);
  --color-warning-bg:     var(--orange-50);
  --color-warning-border: var(--orange-200);

  /* --- Status: Info --- */
  --color-info:        var(--blue-700);
  --color-info-bg:     var(--blue-100);
  --color-info-border: var(--blue-200);

  /* --- Score levels (assessment/learning) --- */
  --color-score-low:  var(--red-500);
  --color-score-mid:  var(--orange-500);
  --color-score-high: var(--green-500);

  /* --- Recommendation card --- */
  --color-rec-bg:     var(--orange-25);
  --color-rec-border: var(--orange-300);
  --color-rec-score:  var(--amber-700);

  /* --- Badge (amber) --- */
  --color-badge-bg:   var(--orange-100);
  --color-badge-txt:  var(--amber-900);

  /* --- Recommend banner (learning centre) --- */
  --color-recommend-bg:     var(--amber-50);
  --color-recommend-border: var(--amber-200);
  --color-recommend-icon:   var(--orange-400);

  /* --- Shape --- */
  --vi-r:   var(--radius-lg);

  /* --- Effects --- */
  --vi-sh:  var(--shadow-sm);
  --vi-sh2: var(--shadow-lg);

  /* --- Layout containers --- */
  --container-max:  960px;
  --container-md:   700px;
  --container-sm:   640px;
  --container-auth: 1060px;

  /* --- Page margins (Elementor wrapper) --- */
  --page-margin-y:        120px;
  --page-margin-y-mobile: 48px;


  /* ===========================================================================
     TIER 3 — COMPONENT (specific component tokens, optional)
     =========================================================================== */

  /* --- Button --- */
  --btn-bg:         var(--vi);
  --btn-bg-hover:   var(--vi-lt);
  --btn-text:       var(--white);
  --btn-radius:     7px;
  --btn-padding-y:  11px;
  --btn-padding-x:  20px;
  --btn-font-size:  var(--text-base);
  --btn-font-weight:var(--weight-semibold);

  /* --- Form input --- */
  --input-border:       1.5px solid var(--vi-bdr);
  --input-radius:       var(--radius-md);
  --input-padding:      9px 12px;
  --input-font-size:    var(--text-sm);
  --input-focus-shadow: 0 0 0 3px rgba(33,150,243,.12);

  /* --- Card --- */
  --card-bg:      var(--vi-w);
  --card-radius:  var(--vi-r);
  --card-shadow:  var(--vi-sh);
  --card-padding: var(--space-12);

  /* --- Assessment sidebar --- */
  --sidebar-width:    220px;
  --sidebar-gap:      32px;
  --sidebar-icon-size: 20px;

  /* --- Assessment option --- */
  --option-border:        2px solid var(--vi-bdr);
  --option-radius:        var(--radius-lg);
  --option-padding:       14px 16px;
  --option-selected-bg:   var(--color-selected);
  --option-selected-left: inset 4px 0 0 0 var(--vi);

  /* --- Progress bar --- */
  --progress-height:  4px;
  --progress-track:   var(--vi-bdr);
  --progress-fill:    var(--vi);
  --progress-radius:  var(--radius-xs);
}


/* =============================================================================
   USAGE EXAMPLES
   =============================================================================

   1. Brand button:
      .btn-primary {
        background: var(--btn-bg);
        color: var(--btn-text);
        border-radius: var(--btn-radius);
        padding: var(--btn-padding-y) var(--btn-padding-x);
        font-weight: var(--btn-font-weight);
        transition: background var(--duration-base);
      }
      .btn-primary:hover { background: var(--btn-bg-hover); }

   2. Status message:
      .message-success {
        background: var(--color-success-bg);
        color: var(--color-success);
        border: 1px solid var(--color-success-border);
        border-radius: var(--radius-base);
        padding: var(--space-6) var(--space-8);
      }

   3. Assessment option:
      .vi-assess-option {
        border: var(--option-border);
        border-radius: var(--option-radius);
        padding: var(--option-padding);
      }
      .vi-assess-option.vi-selected {
        background: var(--option-selected-bg);
        border-color: var(--vi);
        box-shadow: var(--option-selected-left);
      }

   4. Score color (dynamic):
      .score-badge {
        color: var(--color-score-low);    // < 2.0
        color: var(--color-score-mid);    // 2.0 - 2.9
        color: var(--color-score-high);   // 3.0+
      }

   ============================================================================= */