/* ============================================================
   EazyBoook Design System — Colors & Typography
   ============================================================ */

@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   BASE COLOR TOKENS
   ------------------------------------------------------------ */
:root {
  /* Primary */
  --color-primary:           #090a0b;
  --color-primary-text:      #ffffff;

  /* Secondary / Neutral */
  --color-secondary:         #dddddd;
  --color-secondary-text:    #5b5b5b;

  /* Text */
  --color-text:              #090a0b;

  /* Background */
  --color-background:        #ffffff;
  --color-input:             #f5f5f5;
  --color-gray:              #e7e7e7;

  /* Borders */
  --color-border:            #d8d8d8;
  --color-border-active:     #090a0b;

  /* Semantic — Success */
  --color-success:           #e6f4ea;
  --color-success-text:      #09872d;

  /* Semantic — Warning */
  --color-warning:           #fff8e1;
  --color-warning-text:      #b45309;

  /* Semantic — Info */
  --color-info:              #e8f0fe;
  --color-info-text:         #1a56db;

  /* Semantic — Error */
  --color-error:             #fff0f0;
  --color-error-text:        #ff3838;

  /* Brand — Splash */
  --color-splash-bg:         #030810;

  /* ------------------------------------------------------------
     SPACING TOKENS
     ------------------------------------------------------------ */
  --space-none:  0px;
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;

  /* ------------------------------------------------------------
     BORDER RADIUS TOKENS
     ------------------------------------------------------------ */
  --radius-none:    0px;
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-circle:  9999px;

  /* ------------------------------------------------------------
     TYPOGRAPHY — FONT FAMILY
     ------------------------------------------------------------ */
  --font-family:    'Onest', sans-serif;

  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* ------------------------------------------------------------
     TYPOGRAPHY — TYPE SCALE
     ------------------------------------------------------------ */
  --text-large-title:  34px;
  --text-title1:       28px;
  --text-title2:       22px;
  --text-title3:       20px;
  --text-headline:     17px;
  --text-body:         17px;
  --text-callout:      16px;
  --text-subheadline:  15px;
  --text-footnote:     14px;
  --text-caption1:     12px;
  --text-caption2:     11px;

  --letter-spacing:   -0.25px;
}

/* ------------------------------------------------------------
   SEMANTIC / ROLE-BASED CSS VARS
   ------------------------------------------------------------ */
:root {
  --fg-primary:    var(--color-text);
  --fg-secondary:  var(--color-secondary-text);
  --fg-on-dark:    var(--color-primary-text);
  --fg-error:      var(--color-error-text);
  --fg-success:    var(--color-success-text);
  --fg-warning:    var(--color-warning-text);
  --fg-info:       var(--color-info-text);

  --surface-base:  var(--color-background);
  --surface-input: var(--color-input);
  --surface-gray:  var(--color-gray);

  --border-default: var(--color-border);
  --border-focus:   var(--color-border-active);
}

/* ------------------------------------------------------------
   GLOBAL BASE STYLES
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--fg-primary);
  background: var(--surface-base);
  letter-spacing: var(--letter-spacing);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ------------------------------------------------------------
   SEMANTIC TYPE STYLES
   ------------------------------------------------------------ */
.text-large-title {
  font-size: var(--text-large-title);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-spacing);
  line-height: 1.1;
}

.text-title1 {
  font-size: var(--text-title1);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-spacing);
  line-height: 1.2;
}

.text-title2 {
  font-size: var(--text-title2);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing);
  line-height: 1.2;
}

.text-title3 {
  font-size: var(--text-title3);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing);
  line-height: 1.3;
}

.text-headline {
  font-size: var(--text-headline);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4;
}

.text-body {
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  letter-spacing: var(--letter-spacing);
  line-height: 1.5;
}

.text-callout {
  font-size: var(--text-callout);
  font-weight: var(--font-regular);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4;
}

.text-subheadline {
  font-size: var(--text-subheadline);
  font-weight: var(--font-regular);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4;
}

.text-footnote {
  font-size: var(--text-footnote);
  font-weight: var(--font-regular);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4;
}

.text-caption1 {
  font-size: var(--text-caption1);
  font-weight: var(--font-regular);
  letter-spacing: var(--letter-spacing);
  line-height: 1.3;
}

.text-caption2 {
  font-size: var(--text-caption2);
  font-weight: var(--font-regular);
  letter-spacing: var(--letter-spacing);
  line-height: 1.3;
}

/* ------------------------------------------------------------
   UTILITY CLASSES
   ------------------------------------------------------------ */
.font-regular   { font-weight: var(--font-regular); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black     { font-weight: var(--font-black); }

.text-secondary { color: var(--fg-secondary); }
.text-on-dark   { color: var(--fg-on-dark); }
.text-error     { color: var(--fg-error); }
.text-success   { color: var(--fg-success); }