/*
 * Verapath Design System — CSS Custom Properties
 * Source of truth: Figma file "Verapath Web Design Components"
 * Do not edit values here without also updating the Figma file.
 */

:root {
    /* ── Core Brand Colors ─────────────────────────────────────── */
    --color-midnight:         #223029;
    --color-white:            #ffffff;
    --color-bright-green:     #a3e96b;
    --color-green:            #0ea665;
    --color-red:              #f9574d;
    --color-lemon:            #FFF515;
    --color-purple:           #bca9f1;

    /* ── Grays ─────────────────────────────────────────────────── */
    --color-gray-01:          #909893;
    --color-gray-02:          #b9c0be;
    --color-gray-03:          #e0e3e2;
    --color-gray-04:          #f7f7f7;

    /* ── Tints ─────────────────────────────────────────────────── */
    --color-mint:             #daf4dd;
    --color-mint-50:          #edfaee;
    --color-light-purple:     #e5daf4;
    --color-light-purple-50:  #f1edfa;
    --color-beige:            #f1e9e2;
    --color-beige-50:         #f8f4f0;
    --color-pale-yellow:      #FFFCB1;
    --color-pale-yellow-50:   #FFFDD8;

    /* ── Typography ─────────────────────────────────────────────── */
    --font-size-label:        14px;
    --font-size-body:         16px;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-bold:       700;
    --color-text:             var(--color-midnight);
    --color-placeholder:      var(--color-gray-01);

    /* ── Buttons ─────────────────────────────────────────────────  */
    --btn-height:             44px;
    --btn-padding:            10px 20px;
    --btn-border-radius:      6px;
    --btn-font-weight:        var(--font-weight-bold);

    --btn-primary-bg:         var(--color-bright-green);
    --btn-primary-text:       var(--color-midnight);
    --btn-primary-bg-hover:   #8fd455;
    --btn-primary-bg-active:  #7bbf47;
    --btn-primary-bg-disabled:var(--color-gray-03);
    --btn-primary-text-disabled: var(--color-gray-01);

    --btn-secondary-bg:       var(--color-gray-03);
    --btn-secondary-text:     var(--color-midnight);
    --btn-secondary-bg-hover: var(--color-gray-02);
    --btn-secondary-bg-active:#a8b0ae;

    --btn-tertiary-bg:        var(--color-red);
    --btn-tertiary-text:      var(--color-white);
    --btn-tertiary-bg-hover:  #e03e34;
    --btn-tertiary-bg-active: #c73530;

    /* ── Form Inputs ─────────────────────────────────────────────  */
    --input-height:           59px;
    --input-border-radius:    6px;
    --input-border:           1px solid var(--color-gray-02);
    --input-padding:          18px 12px;
    --input-bg:               var(--color-white);
    --input-text:             var(--color-midnight);
    --input-focus-border:     2px solid var(--color-bright-green);
    --input-error-border:     2px solid var(--color-red);
    --input-error-text:       var(--color-red);
    --textarea-min-height:    137px;
    --vp-field-gap:           6px;
    --vp-field-label-gap:     3px;
    --vp-field-message-gap:   8px;
    --vp-field-inline-gap:    8px;
    --vp-field-padding-x:     12px;
    --vp-textarea-padding:    12px;
    --vp-form-gap:            18px;
    --vp-form-gap-compact:    14px;
    --vp-form-section-gap:    18px;
    --vp-form-section-gap-compact: 14px;

    /* ── Spacing / Radius ────────────────────────────────────────  */
    --border-radius-sm:       4px;
    --border-radius-md:       6px;
    --border-radius-lg:       12px;

    /* ── Component Semantic Tokens ───────────────────────────────
       These flip between light and dark mode. Always use these in
       component CSS instead of raw color primitives.
    ── */
    --vp-label-color:         var(--color-midnight);
    --vp-input-color:         var(--color-midnight);
    --vp-placeholder-color:   var(--color-gray-01);
    --vp-surface-input:       var(--color-white);
    --vp-surface-disabled:    var(--color-gray-04);
    --vp-surface-hover:       var(--color-gray-03);
    --vp-border-default:      var(--color-gray-02);
    --vp-border-disabled:     var(--color-gray-03);
    --vp-border-hover:        var(--color-midnight);
    --vp-content-bg:          var(--color-gray-04);
    --vp-content-text:        var(--color-midnight);
    --vp-code-bg:             var(--color-gray-03);
    --vp-divider:             var(--color-gray-03);
}

/* ── Dark Mode Overrides ──────────────────────────────────────────
   Add [data-theme="dark"] to any ancestor element and all
   descendants will pick up these overrides via CSS custom property
   inheritance.
*/
.dark,
[data-theme="dark"] {
    --color-text:             var(--color-white);
    --input-bg:               #243b2f;
    --input-text:             var(--color-white);
    --input-border:           1px solid #4a6057;

    --vp-label-color:         var(--color-white);
    --vp-input-color:         var(--color-white);
    --vp-placeholder-color:   #6b8075;
    --vp-surface-input:       #243b2f;
    --vp-surface-disabled:    #1a2922;
    --vp-surface-hover:       #2d4038;
    --vp-border-default:      #4a6057;
    --vp-border-disabled:     #2d3d35;
    --vp-border-hover:        var(--color-white);
    --vp-content-bg:          #1a2922;
    --vp-content-text:        var(--color-white);
    --vp-code-bg:             #2d4038;
    --vp-divider:             #2d4038;

    --btn-secondary-bg:       #2d4038;
    --btn-secondary-text:     var(--color-white);
    --btn-secondary-bg-hover: #3d5246;
    --btn-secondary-bg-active:#4a6057;
}

/* ── Force light mode on any element ────────────────────────────── */
[data-theme="light"] {
    --color-text:             var(--color-midnight);
    --input-bg:               var(--color-white);
    --input-text:             var(--color-midnight);
    --input-border:           1px solid var(--color-gray-02);
    --vp-label-color:         var(--color-midnight);
    --vp-input-color:         var(--color-midnight);
    --vp-placeholder-color:   var(--color-gray-01);
    --vp-surface-input:       var(--color-white);
    --vp-surface-disabled:    var(--color-gray-04);
    --vp-surface-hover:       var(--color-gray-03);
    --vp-border-default:      var(--color-gray-02);
    --vp-border-disabled:     var(--color-gray-03);
    --vp-border-hover:        var(--color-midnight);
    --vp-content-bg:          var(--color-gray-04);
    --vp-content-text:        var(--color-midnight);
    --vp-code-bg:             var(--color-gray-03);
    --vp-divider:             var(--color-gray-03);
    --btn-secondary-bg:       var(--color-gray-03);
    --btn-secondary-text:     var(--color-midnight);
    --btn-secondary-bg-hover: var(--color-gray-02);
    --btn-secondary-bg-active:#a8b0ae;
}

/* ── Button Base Classes ─────────────────────────────────────────  */
.btn-primary, .btn-secondary, .btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height);
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--font-size-body);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.btn-primary  { background-color: var(--btn-primary-bg);   color: var(--btn-primary-text); }
.btn-primary:hover   { background-color: var(--btn-primary-bg-hover); }
.btn-primary:active  { background-color: var(--btn-primary-bg-active); }
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--btn-primary-bg-disabled);
    color: var(--btn-primary-text-disabled);
    cursor: not-allowed;
}
.btn-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn-secondary:hover  { background-color: var(--btn-secondary-bg-hover); }
.btn-secondary:active { background-color: var(--btn-secondary-bg-active); }
.btn-tertiary  { background-color: var(--btn-tertiary-bg);  color: var(--btn-tertiary-text); }
.btn-tertiary:hover  { background-color: var(--btn-tertiary-bg-hover); }
.btn-tertiary:active { background-color: var(--btn-tertiary-bg-active); }

/* ── Form Input Base Classes ─────────────────────────────────────  */
.input-group { display: flex; flex-direction: column; gap: var(--vp-field-gap); }
.input-group label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); color: var(--color-text); }
.form-input input, .form-input select, .form-input textarea {
    width: 100%; height: var(--input-height); padding: var(--input-padding);
    border: var(--input-border); border-radius: var(--input-border-radius);
    background-color: var(--input-bg); color: var(--input-text); font-size: var(--font-size-body);
}
.form-input textarea { height: auto; min-height: var(--textarea-min-height); resize: vertical; }
.form-input input:focus, .form-input select:focus, .form-input textarea:focus { outline: none; border: var(--input-focus-border); }
.form-input.error input, .form-input.error select, .form-input.error textarea { border: var(--input-error-border); }
.input-error-message { font-size: var(--font-size-label); color: var(--input-error-text); margin-top: var(--vp-field-message-gap); }
.form-input input::placeholder, .form-input textarea::placeholder { color: var(--color-placeholder); }

/* ── Checkbox ────────────────────────────────────────────────────  */
.checkbox-row { display: flex; align-items: center; gap: 12px; }
.checkbox-row .checkbox {
    width: 18px; height: 18px; border: 1px solid var(--color-gray-02);
    border-radius: var(--border-radius-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.checkbox-row .checkbox.checked { background-color: var(--color-bright-green); border-color: var(--color-bright-green); }
.checkbox-row .checkbox.error   { border-color: var(--color-red); }
.checkbox-row label { font-size: var(--font-size-body); color: var(--color-text); cursor: pointer; }