:root {
    --np2-primary:        #ff6e00;
    --np2-primary-light:  #fff1e5;
    --np2-primary-peach:  #ffd1ad;
    --np2-accent-bar:     3px;
    --np2-nav-width:      332px;
    --np2-radius:         10px;
    --np2-radius-sm:      5px;
    --np2-text-dark:      #333333;
    --np2-text-mid:       #3c3e68;
    --np2-text-muted:     #666666;
    --np2-text-light:     #aaaaaa;
    --np2-border:         #dddddd;
    --np2-sep:            #eeeeee;
    --np2-icon-ph:        #d9d9d9;
    --np2-logout-color:   #bf1313;
    --np2-verified-bg:    #EBFFEB;
    --np2-verified-color: #219f23;
    --np2-link-blue:      #2e82e1;
    --np2-nav-bg:         #ffffff;

    --font-size-10: 0.625rem;  /** 10px */
    --font-size-11: 0.6875rem; /** 11px */
    --font-size-12: 0.75rem;   /** 12px */
    --font-size-13: 0.8125rem; /** 13px */
    --font-size-14: 0.875rem;  /** 14px */
    --font-size-15: 0.9375rem; /** 15px */
    --font-size-16: 1rem;      /** 16px */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-h1: 1.125rem;   /** 18px */
    --font-size-h2: 1.0625rem;  /** 17px */
    --font-size-h3: 1rem;       /** 16px */
    --font-size-h4: 0.9375rem;  /** 15px */

    --control-height-xl: 2.75rem;  /** 44px */
    --control-height-lg: 2.5rem;   /** 40px */
    --control-height-md: 2rem;     /** 32px */
    --control-height-sm: 1.5rem;   /** 24px */

    --space-1: 0.25rem; /** 4px */
    --space-2: 0.5rem;  /** 8px */
    --space-3: 1rem;    /** 16px */
    --space-4: 1.5rem;  /** 24px */
    --space-5: 2rem;    /** 32px */
    --space-6: 3rem;    /** 48px */
    --space-7: 4rem;    /** 64px */
    --space-8: 5rem;    /** 80px */
    --space-9: 8rem;    /** 128px */

    /* ========================================
    Text colors
    ======================================== */

    --color-text-primary: #333333;
    --color-text-secondary: #8b8b8b;
    --color-text-muted: #999999;
    --color-text-disabled: #6b7280;

    --color-text-link: #1557b0;
    --color-text-link-hover: #0f4085;

    --color-text-success: #16794b;
    --color-text-warning: #854d0e;
    --color-text-error: #b42318;

    --color-text-on-dark: #ffffff;


    /* ========================================
    Primary button
    ======================================== */

    --button-primary-bg: #ff6e00;
    --button-primary-bg-hover: #ed6500;
    --button-primary-bg-active: #d95c00;

    --button-primary-text: #ffffff;
    --button-primary-border: #ff6e00;


    /* ========================================
    Secondary button
    ======================================== */

    --button-secondary-bg: #ffffff;
    --button-secondary-bg-hover: #fff5ed;
    --button-secondary-bg-active: #ffe8d6;

    --button-secondary-text: #ff6e00;
    --button-secondary-text-hover: #e35e00;

    --button-secondary-border: #ff6e00;
    --button-secondary-border-hover: #e35e00;


    /* ========================================
    Tertiary button
    ======================================== */

    --button-tertiary-bg: transparent;
    --button-tertiary-bg-hover: #f5f5f5;
    --button-tertiary-bg-active: #eeeeee;

    --button-tertiary-text: #333333;
    --button-tertiary-text-hover: #111111;
    --button-tertiary-border: transparent;


    /* ========================================
    Disabled button
    ======================================== */

    --button-disabled-bg: #e5e7eb;
    --button-disabled-text: #9ca3af;



    /* ========================================
    Button shared styles
    ======================================== */

    --button-font-size: var(--font-size-14);
    --button-font-weight: var(--font-weight-medium);

    --button-border-width-05: 0.5px;
    --button-border-width-1: 1px;
    --button-border-radius-8: 0.5rem;
    --button-border-radius-16: 1rem;
    --button-border-radius-64: 4rem;
    --button-border-radius-128: 8rem;
    --button-padding-inline: var(--space-3);

    --button-focus-color: #b94700;
    --button-focus-ring: rgb(255 110 0 / 25%);


    /* ========================================
    Inputs
    ======================================== */

    --color-input-bg: #f5f5f5;
    --color-input-bg-focus: #ffffff;

    --color-input-text: #333333;
    --color-input-placeholder: #6b7280;
    --color-input-border-hover: #9ca3af;
    --color-input-border-focus: #999999;
    --color-input-error: #bf1313;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: var(--control-height-lg);
    padding-inline: var(--button-padding-inline);

    font-family: inherit;
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: 1.5;

    text-align: center;
    text-decoration: none;

    border-width: var(--button-border-width);
    border-style: solid;
    border-radius: var(--button-border-radius);

    cursor: pointer;

    transition:
            color 150ms ease,
            background-color 150ms ease,
            border-color 150ms ease,
            box-shadow 150ms ease;
}



.btn--primary {
    color: var(--button-primary-text);
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-border);
}

.btn--primary:hover {
    color: var(--button-primary-text);
    background-color: var(--button-primary-bg-hover);
    border-color: var(--button-primary-bg-hover);
}

.btn--primary:active {
    color: var(--button-primary-text);
    background-color: var(--button-primary-bg-active);
    border-color: var(--button-primary-bg-active);
}