/*
 * CoStar Brand Design Tokens
 * Source: CoStar Brand Guidelines
 *
 * USAGE
 * -----
 * Import this file once at the top of your main stylesheet:
 *   @import url('brand.css');
 *
 * Then reference tokens anywhere in your CSS:
 *   color: var(--color-signature-blue);
 *   font-family: var(--font-body);
 *
 * When the CoStar Brown font file becomes available, add @font-face
 * rules here and update --font-body / --font-display below.
 */

:root {

    /* ── Brand Colors ───────────────────────────────────────────── */

    /* Primary */
    --color-signature-blue:  #0054A6;   /* C100 M75 Y0 K0  · R0 G84 B166   */

    /* Secondary */
    --color-medium-blue:     #00B0E6;   /* C80  M0  Y0 K5  · R0 G176 B230  */
    --color-light-blue:      #9DDCF9;   /* C35  M0  Y0 K0  · R157 G220 B249 */

    /* Accent */
    --color-golden-yellow:   #FFC20E;   /* C1   M25 Y98 K0 · R255 G194 B14  */

    /* Neutrals */
    --color-black:           #000000;   /* C0 M0 Y0 K100 */
    --color-black-80:        #5a5a5a;   /* C0 M0 Y0 K80  · R90  G90  B90  */
    --color-black-10:        #e6e6e6;   /* C0 M0 Y0 K10  · R230 G230 B230 */
    --color-white:           #ffffff;   /* C0 M0 Y0 K0   · R255 G255 B255 */

    /* Semantic aliases (use these in components) */
    --color-text-primary:    var(--color-black);
    --color-text-secondary:  var(--color-black-80);
    --color-text-link:       var(--color-signature-blue);
    --color-border:          var(--color-black-10);
    --color-bg-page:         var(--color-white);

    /* ── Typography ─────────────────────────────────────────────── */

    /*
     * Brand typeface: CoStar Brown (Bold · Regular · Light)
     * Substitute: Arial (loaded on all Macs & PCs per brand guidelines)
     * When CoStar Brown becomes available, prepend it here:
     *   --font-body: "CoStar Brown", Arial, sans-serif;
     */
    --font-body:     Arial, sans-serif;
    --font-display:  Arial, sans-serif;

    --font-weight-bold:    700;
    --font-weight-regular: 400;
    --font-weight-light:   300;

    /* Type scale (px) — from brand typesetting guide */
    --font-size-big-word:      28px;   /* Big word: Bold ALL CAPS, min 28pt      */
    --font-size-headline:      28px;   /* Headlines: Bold sentence case, min 28pt */
    --font-size-subhead:       18px;   /* Subhead/Eyebrows: Regular ALL CAPS     */
    --font-size-body-headline: 14px;   /* Body headlines: Bold sentence case     */
    --font-size-body:          14px;   /* Body text: Light sentence case, min 8pt */
    --font-size-small:         12px;   /* Labels, legal copy                     */

    /* Line heights */
    --line-height-display: 1.125;   /* Leading 1.125× (big word, headlines)   */
    --line-height-body:    1.25;    /* Leading 1.25× (body text)              */

    /* Letter spacing — tracking values converted from pt to em (~1pt ≈ 0.001em) */
    --tracking-tight:    -0.02em;  /* Tracking -20 (headlines, body headlines) */
    --tracking-wide:      0.01em;  /* Tracking +10 (subheads)                  */

    /* ── Spacing ────────────────────────────────────────────────── */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;

    /* ── Border radius ──────────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
}

/* ── Base resets using brand tokens ──────────────────────────────── */

html,
body {
    font-family: var(--font-body);
    font-size:   var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color:       var(--color-text-primary);
    background:  var(--color-bg-page);
    line-height: var(--line-height-body);
    margin: 0;
}

/* ── Utility classes ─────────────────────────────────────────────── */

/* Text styles */
.text-big-word {
    font-family:    var(--font-display);
    font-size:      var(--font-size-big-word);
    font-weight:    var(--font-weight-bold);
    line-height:    var(--line-height-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

.text-headline {
    font-family:    var(--font-display);
    font-size:      var(--font-size-headline);
    font-weight:    var(--font-weight-bold);
    line-height:    var(--line-height-display);
    letter-spacing: var(--tracking-tight);
}

.text-subhead {
    font-family:    var(--font-body);
    font-size:      var(--font-size-subhead);
    font-weight:    var(--font-weight-regular);
    line-height:    var(--line-height-display);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.text-body-headline {
    font-family:    var(--font-body);
    font-size:      var(--font-size-body-headline);
    font-weight:    var(--font-weight-bold);
    line-height:    var(--line-height-body);
    letter-spacing: var(--tracking-tight);
}

.text-body {
    font-family:    var(--font-body);
    font-size:      var(--font-size-body);
    font-weight:    var(--font-weight-light);
    line-height:    var(--line-height-body);
}

.text-small {
    font-family: var(--font-body);
    font-size:   var(--font-size-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
}

/* Color utilities */
.color-signature-blue  { color: var(--color-signature-blue);  }
.color-medium-blue     { color: var(--color-medium-blue);      }
.color-light-blue      { color: var(--color-light-blue);       }
.color-golden-yellow   { color: var(--color-golden-yellow);    }
.color-black-80        { color: var(--color-black-80);         }

.bg-signature-blue     { background-color: var(--color-signature-blue);  }
.bg-medium-blue        { background-color: var(--color-medium-blue);      }
.bg-light-blue         { background-color: var(--color-light-blue);       }
.bg-golden-yellow      { background-color: var(--color-golden-yellow);    }
.bg-black-10           { background-color: var(--color-black-10);         }