/* =============================================================
   Leadity Design Tokens
   Source of truth: tailwind.config.ts + Figma library
   ============================================================= */

/* Montserrat Bold (self-hosted) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
}

/* Roboto 100 (Thin) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-100.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-100.woff') format('woff'),
       url('fonts/roboto-v30-latin-100.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-100italic.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-100italic.woff') format('woff'),
       url('fonts/roboto-v30-latin-100italic.ttf') format('truetype');
}

/* Roboto 300 (Light) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-300.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-300.woff') format('woff'),
       url('fonts/roboto-v30-latin-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-300italic.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-300italic.woff') format('woff'),
       url('fonts/roboto-v30-latin-300italic.ttf') format('truetype');
}

/* Roboto 400 (Regular) — mapped from 500 files since no 400 provided */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-500.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-500.woff') format('woff'),
       url('fonts/roboto-v30-latin-500.ttf') format('truetype');
}

/* Roboto 500 (Medium) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-500.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-500.woff') format('woff'),
       url('fonts/roboto-v30-latin-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-500italic.woff2') format('woff2'),
       url('fonts/roboto-v30-latin-500italic.woff') format('woff'),
       url('fonts/roboto-v30-latin-500italic.ttf') format('truetype');
}

/* Roboto 600 (Semibold) — mapped from 700 since no 600 provided */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-700.woff') format('woff'),
       url('fonts/roboto-v30-latin-700.ttf') format('truetype');
}

/* Roboto 700 (Bold) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto-v30-latin-700.woff') format('woff'),
       url('fonts/roboto-v30-latin-700.ttf') format('truetype');
}

:root {
  /* ---------- Type families ---------- */
  --font-title:   'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Roboto', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (Tailwind tokens) ---------- */
  /* display-lg  30 / 130% / 700  */
  --text-display-lg-size:        1.875rem;
  --text-display-lg-line:        130%;
  --text-display-lg-weight:      700;
  --text-display-lg-tracking:    0.1px;

  /* display-md  25 / 130% / 700  */
  --text-display-md-size:        1.5625rem;
  --text-display-md-line:        130%;
  --text-display-md-weight:      700;
  --text-display-md-tracking:    0.1px;

  /* display-sm  21 / 130% / 700  */
  --text-display-sm-size:        1.3125rem;
  --text-display-sm-line:        130%;
  --text-display-sm-weight:      700;
  --text-display-sm-tracking:    0.1px;

  /* title-lg    21 / 150% / 600  */
  --text-title-lg-size:          1.3125rem;
  --text-title-lg-line:          150%;
  --text-title-lg-weight:        600;
  --text-title-lg-tracking:      0.105px;

  /* title-md    18 / 150% / 600  */
  --text-title-md-size:          1.125rem;
  --text-title-md-line:          150%;
  --text-title-md-weight:        600;
  --text-title-md-tracking:      0.09px;

  /* title-sm    16 / 130% / 600  */
  --text-title-sm-size:          1rem;
  --text-title-sm-line:          130%;
  --text-title-sm-weight:        600;
  --text-title-sm-tracking:      0.08px;

  /* label       16 / 20 / 600   */
  --text-label-size:             1rem;
  --text-label-line:             1.25rem;
  --text-label-weight:           600;

  /* body        16 / 24 / 400   */
  --text-body-size:              1rem;
  --text-body-line:              1.5rem;
  --text-body-weight:            400;

  /* body-sm     14 / 20 / 400   */
  --text-body-sm-size:           0.875rem;
  --text-body-sm-line:           1.25rem;
  --text-body-sm-weight:         400;

  /* ---------- Brand colors ---------- */
  --brand-green:                 #5AB45A;  /* leadity wordmark */
  --main-color:                  #009640;  /* header bar bg — configurable per tenant */
  --second-color:                #ffffff;  /* header text color */
  --light:                       #f0f5f5;
  --white:                       #ffffff;

  --text-dark:                   #01181D;
  --text-default:                #05323C;
  --text-light:                  #829BA0;

  /* neutral scale */
  --neutral-10:                  #f0f5f5;
  --neutral-20:                  #dce7e7;
  --neutral-40:                  #cbd9da;
  --neutral-50:                  #a6b8b9;
  --neutral-60:                  #829ba0;
  --neutral-80:                  #325a5f;
  --neutral-100:                 #05323C;
  --neutral-120:                 #01181D;

  /* ---------- Chart palette ---------- */
  --chart-neutral-20:  #dce7e7;
  --chart-neutral-40:  #cbd9da;
  --chart-neutral-60:  #829ba0;
  --chart-neutral-80:  #325a5f;
  --chart-neutral-100: #05323C;

  --chart-gold-20:  #E3DCCB;
  --chart-gold-40:  #D5CAB0;
  --chart-gold-60:  #C7B896;
  --chart-gold-80:  #B9A67B;
  --chart-gold-100: #AB9460;

  --chart-green-20:  #CAE3CF;
  --chart-green-40:  #AFD4B8;
  --chart-green-60:  #95C6A0;
  --chart-green-80:  #7AB888;
  --chart-green-100: #5FAA70;

  --chart-aqua-20:  #DAEFF0;
  --chart-aqua-40:  #BDE2E4;
  --chart-aqua-60:  #A0D6D9;
  --chart-aqua-80:  #83C9CD;
  --chart-aqua-100: #66BCC1;

  --chart-lilac-20:  #E6DFF7;
  --chart-lilac-40:  #CDBEEF;
  --chart-lilac-60:  #B39EE7;
  --chart-lilac-80:  #9A7DDF;
  --chart-lilac-100: #815CD7;

  --chart-pink-20:  #F0DAED;
  --chart-pink-40:  #E4BDDF;
  --chart-pink-60:  #D9A0D1;
  --chart-pink-80:  #CD83C3;
  --chart-pink-100: #C166B5;

  --chart-purple-20:  #F0DADB;
  --chart-purple-40:  #E4BDBE;
  --chart-purple-60:  #D9A0A1;
  --chart-purple-80:  #CD8384;
  --chart-purple-100: #C16667;

  /* ---------- Semantic (status) ----------
     Four-step scales: text (100) · background (50) · -light-hover (20) · -light (10).
     warning's text is on the orange ramp; its backgrounds are on the yellow ramp.
     open has been demoted to grey (neutral); blue moved to the new check semantic.
  */
  /* success — green */
  --success-text:                      #1f8a5b;   /* green-100 */
  --success-background:                #3aae74;   /* green-50  */
  --success-background-light-hover:    #bfe4cc;   /* green-20  */
  --success-background-light:          #e2f4ea;   /* green-10  */

  /* warning — orange (text) + yellow (backgrounds) */
  --warning-text:                      #c2521a;   /* orange-100 */
  --warning-background:                #ffb800;   /* yellow-50  */
  --warning-background-light-hover:    #fae8c0;   /* yellow-20  */
  --warning-background-light:          #fff1d7;   /* yellow-10  */

  /* error — red */
  --error-text:                        #bc194a;   /* red-100 */
  --error-background:                  #e84a6b;   /* red-50  */
  --error-background-light-hover:      #ffd4d9;   /* red-20  */
  --error-background-light:            #ffe7ea;   /* red-10  */

  /* open — grey (neutral) */
  --open-text:                         #325a5f;   /* grey-80 */
  --open-background:                   #dce7e7;   /* grey-20 */
  --open-background-light-hover:       #dce7e7;   /* grey-20 */
  --open-background-light:             #f0f5f5;   /* grey-10 */

  /* check — blue (was: open) */
  --check-text:                        #2073A2;   /* blue-100 */
  --check-background:                  #2591cf;   /* blue-50  */
  --check-background-light-hover:      #c2deea;   /* blue-20  */
  --check-background-light:            #e7f3f9;   /* blue-10  */

  --colorGreen:                    #5FAA70;
  --colorRed:                      #bc194a;

  /* ---------- Spacing scale (s-prefixed; preferred) ---------- */
  --space-s0:  0;
  --space-s1:  0.125rem; /* 2px  */
  --space-s2:  0.25rem;  /* 4px  */
  --space-s3:  0.5rem;   /* 8px  */
  --space-s4:  0.75rem;  /* 12px */
  --space-s5:  1rem;     /* 16px */
  --space-s6:  1.5rem;   /* 24px */
  --space-s7:  2rem;     /* 32px */
  --space-s8:  3rem;     /* 48px */
  --space-s9:  4rem;     /* 64px */
  --space-s10: 6rem;     /* 96px */
  --space-s11: 8rem;     /* 128px */
  --space-s12: 12rem;    /* 192px */
  --space-s13: 16rem;    /* 256px */
  --space-s14: 20rem;    /* 320px */

  /* ---------- Border radius ---------- */
  --border-radius-xs:   2px;
  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --border-radius-xl:   20px;
  --border-radius-full: 999px;

  /* ---------- Shadows (whisper-soft) ---------- */
  --box-shadow-default:
    0 2px 15px rgba(49, 60, 84, 0.02),
    0 4px 16px rgba(68, 69, 71, 0.03);
  --box-shadow-default-hover:
    0 2px 18px rgba(49, 60, 84, 0.04),
    0 8px 24px rgba(68, 69, 71, 0.06);
  --box-shadow-floating:
    0 8px 24px rgba(49, 60, 84, 0.06),
    0 16px 40px rgba(68, 69, 71, 0.08);

  /* ---------- Breakpoints ---------- */
  --bp-xs:  480px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
  --bp-3xl: 1600px;
  --bp-4xl: 1920px;
}

/* =============================================================
   Semantic element styles (use as a starting point in HTML)
   ============================================================= */

html, body {
  font-family: var(--font-title);
  color: var(--text-default);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
  font-weight: var(--text-display-lg-weight);
  letter-spacing: var(--text-display-lg-tracking);
  color: var(--text-dark);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-md-size);
  line-height: var(--text-display-md-line);
  font-weight: var(--text-display-md-weight);
  letter-spacing: var(--text-display-md-tracking);
  color: var(--text-dark);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-display-sm-size);
  line-height: var(--text-display-sm-line);
  font-weight: var(--text-display-sm-weight);
  letter-spacing: var(--text-display-sm-tracking);
  color: var(--text-dark);
  margin: 0;
}
.title-lg {
  font-family: var(--font-title);
  font-size: var(--text-title-lg-size);
  line-height: var(--text-title-lg-line);
  font-weight: var(--text-title-lg-weight);
  letter-spacing: var(--text-title-lg-tracking);
  color: var(--text-dark);
}
.title-md {
  font-family: var(--font-title);
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-line);
  font-weight: var(--text-title-md-weight);
  letter-spacing: var(--text-title-md-tracking);
  color: var(--text-dark);
}
.title-sm {
  font-family: var(--font-title);
  font-size: var(--text-title-sm-size);
  line-height: var(--text-title-sm-line);
  font-weight: var(--text-title-sm-weight);
  letter-spacing: var(--text-title-sm-tracking);
  color: var(--text-dark);
}
.label {
  font-family: var(--font-title);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--text-default);
}
p, .body {
  font-family: var(--font-title);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--text-default);
  margin: 0;
}
.body-sm {
  font-family: var(--font-title);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--text-default);
}
.text-light { color: var(--text-light); }
.text-dark  { color: var(--text-dark); }

a {
  color: var(--neutral-80);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--neutral-10);
  border-radius: var(--border-radius-sm);
  padding: 0.1em 0.35em;
}