/* ============================================================
   WARRENS LETTING CO — DESIGN TOKENS
   Brand Kit v2 · 2025
   Use these tokens in every project to maintain consistency.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOUR PALETTE
  ---------------------------------------------------------- */

  /* Core brand */
  --color-midnight:      #0B1437;   /* Primary dark / hero backgrounds */
  --color-cobalt:        #2D5BE3;   /* Primary brand blue / CTAs / badges */
  --color-mint:          #00E5C8;   /* Accent / highlights / active states */
  --color-ice:           #EFF4FF;   /* Light surface / section backgrounds */

  /* Cobalt tints (for states, surfaces) */
  --color-cobalt-900:    #0B1437;
  --color-cobalt-800:    #152260;
  --color-cobalt-700:    #1A3196;
  --color-cobalt-600:    #2D5BE3;   /* base */
  --color-cobalt-500:    #517AE8;
  --color-cobalt-400:    #7599ED;
  --color-cobalt-300:    #9AB7F3;
  --color-cobalt-200:    #C4D5F9;
  --color-cobalt-100:    #E0EAFC;
  --color-cobalt-50:     #EFF4FF;

  /* Mint tints */
  --color-mint-900:      #003B34;
  --color-mint-600:      #00B3A0;
  --color-mint-400:      #00E5C8;   /* base */
  --color-mint-200:      #7AF3E9;
  --color-mint-50:       #E0FAF7;

  /* Neutrals */
  --color-neutral-900:   #0D0F14;
  --color-neutral-800:   #1C2030;
  --color-neutral-700:   #2C3045;
  --color-neutral-600:   #4A4F6A;
  --color-neutral-500:   #696E8A;
  --color-neutral-400:   #9298B0;
  --color-neutral-300:   #C0C4D6;
  --color-neutral-200:   #DDE1EF;
  --color-neutral-100:   #ECEEF6;
  --color-neutral-50:    #F7F8FC;
  --color-white:         #FFFFFF;

  /* Semantic */
  --color-success:       #00C48C;
  --color-warning:       #F5A623;
  --color-error:         #E8354A;
  --color-info:          #2D5BE3;


  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */

  /* Font stacks */
  --font-display:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font sizes — type scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

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

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;


  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */


  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;


  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(11, 20, 55, 0.08), 0 1px 2px rgba(11, 20, 55, 0.06);
  --shadow-md:  0 4px 12px rgba(11, 20, 55, 0.10), 0 2px 4px rgba(11, 20, 55, 0.06);
  --shadow-lg:  0 10px 30px rgba(11, 20, 55, 0.12), 0 4px 8px rgba(11, 20, 55, 0.06);
  --shadow-xl:  0 20px 60px rgba(11, 20, 55, 0.16), 0 8px 16px rgba(11, 20, 55, 0.08);

  /* Cobalt glow — use on CTA buttons / active states */
  --shadow-cobalt: 0 8px 24px rgba(45, 91, 227, 0.35);
  --shadow-mint:   0 8px 24px rgba(0, 229, 200, 0.30);


  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */

  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-overlay:   100;
  --z-modal:     200;
  --z-toast:     300;
  --z-tooltip:   400;


  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow:  768px;

  --nav-height:  72px;
  --section-pad: var(--space-24);
}


/* ============================================================
   COMPONENT TOKENS — quick reference shortcuts
   ============================================================ */

:root {
  /* Buttons */
  --btn-radius:             var(--radius-md);
  --btn-padding:            0.625rem 1.5rem;
  --btn-font-size:          var(--text-sm);
  --btn-font-weight:        var(--font-semibold);
  --btn-letter-spacing:     var(--tracking-wide);
  --btn-transition:         var(--transition-base);

  /* Primary button */
  --btn-primary-bg:         var(--color-cobalt);
  --btn-primary-color:      var(--color-white);
  --btn-primary-hover-bg:   #1E4BD4;
  --btn-primary-shadow:     var(--shadow-cobalt);

  /* Secondary button */
  --btn-secondary-bg:       transparent;
  --btn-secondary-color:    var(--color-cobalt);
  --btn-secondary-border:   1.5px solid var(--color-cobalt);

  /* Accent button */
  --btn-accent-bg:          var(--color-mint);
  --btn-accent-color:       var(--color-midnight);
  --btn-accent-shadow:      var(--shadow-mint);

  /* Cards */
  --card-bg:                var(--color-white);
  --card-border:            1px solid var(--color-neutral-200);
  --card-radius:            var(--radius-lg);
  --card-padding:           var(--space-6);
  --card-shadow:            var(--shadow-sm);
  --card-hover-shadow:      var(--shadow-md);

  /* Inputs */
  --input-bg:               var(--color-white);
  --input-border:           1.5px solid var(--color-neutral-300);
  --input-border-focus:     1.5px solid var(--color-cobalt);
  --input-radius:           var(--radius-md);
  --input-padding:          0.75rem 1rem;
  --input-font-size:        var(--text-base);

  /* Navigation */
  --nav-bg:                 var(--color-midnight);
  --nav-color:              var(--color-white);
  --nav-accent:             var(--color-mint);
  --nav-link-hover:         var(--color-cobalt-300);

  /* Badges */
  --badge-radius:           var(--radius-full);
  --badge-padding:          0.25rem 0.75rem;
  --badge-font-size:        var(--text-xs);
  --badge-font-weight:      var(--font-semibold);
  --badge-letter-spacing:   var(--tracking-wide);
}