/* This is Brand CSS */
/* The Ables V1.0 */

/* Global & Responsive Approach */
:root {
    /* Brand Colors */
    --brand-color: #485160;
    --brand-color-dark: #313131;
    --brand-color-light: #9595b0;
    --brand-secondary-color: #E89076;
    --brand-secondary-color-dark: #c76243;
    --brand-secondary-color-light: #FFE3D0;
    --brand-background-color: #FFFFFF;
    --brand-text-color: #000000;              /* Paragraph text */
    --brand-heading-text-color: #313131;      /* H1-H4 */
    --brand-link-text-color: var(--brand-color);
     
    /* Brand Button Colors */
     --brand-button-bg: var(--brand-color);
     --brand-button-hover-bg: var(--brand-color-dark);
     --brand-button-text-color: #FFFFFF;
     --brand-button-secondary-bg: transparent;
     --brand-button-secondary-border: var(--brand-color);
     --brand-button-secondary-text: var(--brand-color);
     --brand-button-secondary-hover-bg: var(--brand-color-light); 
    
    /* Feedback State Colors */
    --brand-error-color: #E53935;
    --brand-error-color-light: #FFCDD2;
    --brand-error-color-dark: #B71C1C;
  
    --brand-success-color: #24D99C;
    --brand-success-color-light: #ddfff4;
    --brand-success-color-dark: #0b3d0e;
  
    --brand-warning-color: #FFA000;           /* Optional */
    --brand-warning-color-light: #FFECB3;
    --brand-warning-color-dark: #F57C00;
  
    --brand-info-color: #0288D1;
    --brand-info-color-light: #B3E5FC;
    --brand-info-color-dark: #01579B;   
  
    /* Form Fields */
    --brand-input-border-color: #d7d7d7;
    --brand-input-focus-border-color: #898989;
    --brand-input-placeholder-color: #777777;
    --brand-input-text-color: var(--brand-text-color);
    --brand-form-icon-color: #999999;
  
    /* Optional */
    --brand-disabled-bg: #F0F0F0;
    --brand-disabled-text: #B0B0B0;
    --brand-highlight-color: #FFFDE7;
    --brand-overlay-color: rgba(0, 0, 0, 0.6);
  
    --brand-promocode-background-color: #353535;
    --brand-promocode-text-color: #dcdcdc;
    --brand-promocode-copy-button-color: #717171;
    --brand-promocode-copy-button-hover-color: #C7C7C7;
    --brand-promocode-copy-icon-color: #343434;
    --brand-promocode-copy-icon-hover-color: #444444;
  
    /* Typography for Content */
    --brand-font-heading: 'Inter', sans-serif;
    --brand-font-body: 'Inter', sans-serif;
  }
  
  /* Desktop & Everything Else */
  :root {
    /* Font Sizes */
    --brand-font-size-h1: 32px;
    --brand-font-size-h2: 28px;
    --brand-font-size-h3: 24px;
    --brand-font-size-h4: 20px;
    --brand-font-size-paragraph: 18px;
    --brand-font-size-small: 16px;
    --brand-font-icon-size-large: 64px;
  
    /* Spacing & Feel */
    --brand-border-radius: 12px;
    --brand-vertical-spacing: 24px;
    --brand-vertical-small-spacing: 20px;
    --brand-vertical-xsmall-spacing: 12px;
    --brand-vertical-xxsmall-spacing: 4px;
    --brand-horizontal-spacing: 32px;
    --brand-horizontal-small-spacing: 16px;
    --brand-horizontal-xsmall-spacing: 12px;
  }
  
  /* Tablet Design */
  @media (min-width: 768px) and (max-width: 1024px) {
    :root {
      /* Font Sizes */
      --brand-font-size-h1: 28px;
      --brand-font-size-h2: 24px;
      --brand-font-size-h3: 20px;
      --brand-font-size-h4: 18px;
      --brand-font-size-paragraph: 16px;
      --brand-font-size-small: 14px;
      --brand-font-icon-size-large: 60px;
    
      /* Spacing & Feel */
      --brand-border-radius: 8px;
      --brand-vertical-spacing: 20px;
      --brand-vertical-small-spacing: 18px;
      --brand-vertical-xsmall-spacing: 12px;
      --brand-vertical-xxsmall-spacing: 4px;
      --brand-horizontal-spacing: 24px;
      --brand-horizontal-small-spacing: 14px;
      --brand-horizontal-xsmall-spacing: 10px;
    }
  }
  
  /* Mobile Design */
  @media (max-width: 767px) {
    :root {
      /* Font Sizes */
      --brand-font-size-h1: 24px;
      --brand-font-size-h2: 20px;
      --brand-font-size-h3: 18px;
      --brand-font-size-h4: 16px;
      --brand-font-size-paragraph: 16px;
      --brand-font-size-small: 14px;
      --brand-font-icon-size-large: 56px;
  
      /* Spacing & Feel */
      --brand-border-radius: 8px;
      --brand-vertical-spacing: 16px;
      --brand-vertical-small-spacing: 14px;
      --brand-vertical-xsmall-spacing: 12px;
      --brand-vertical-xxsmall-spacing: 4px;
      --brand-horizontal-spacing: 20px;
      --brand-horizontal-small-spacing: 12px;
      --brand-horizontal-xsmall-spacing: 8px;
  
      /* Mobile Only Styling */
      --brand-side-margin: 24px;
    }
  }