/* ==========================================================================
   DESIGN TOKENS
   Raw scales first, semantic aliases second. Components should reference
   the semantic layer, not the raw scale, so a future rebrand or contrast
   fix only touches this file.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     RAW COLOR SCALES
     ------------------------------------------------------------------------ */

  /* Core (purple / brand) */
  --color-core-50:  #F7F2FD;
  --color-core-100: #EDE0FA;
  --color-core-200: #DBBFF8;
  --color-core-300: #C28EF6;
  --color-core-400: #9E49F3;
  --color-core-500: #800DF2;
  --color-core-600: #6B07CF;
  --color-core-700: #5C04B4; /* base */
  --color-core-800: #47048B;
  --color-core-900: #330462;
  --color-core-950: #1F033A;

  /* Core Neutral (greys with a purple cast) */
  --color-core-neutral-50:  #FAF9FC;
  --color-core-neutral-100: #F4F2F8;
  --color-core-neutral-200: #E9E6F0;
  --color-core-neutral-300: #D8D3E3;
  --color-core-neutral-400: #A99FBA;
  --color-core-neutral-500: #7A7191;
  --color-core-neutral-600: #5C5470; /* base */
  --color-core-neutral-700: #453F56;
  --color-core-neutral-800: #3F3A4E;
  --color-core-neutral-900: #332F3F;
  --color-core-neutral-950: #282531;

  /* Accent (orange) — anchored at 500 with the exact brand hex, tints/shades
     scaled proportionally using the same lightness/saturation curve as Core */
  --color-accent-50:  #FCEBE0;
  --color-accent-100: #FAE0CE;
  --color-accent-200: #FACCAB;
  --color-accent-300: #FCAF79;
  --color-accent-400: #FD8733;
  --color-accent-500: #F56600; /* base — exact brand input */
  --color-accent-600: #CE5600;
  --color-accent-700: #B14A00;
  --color-accent-800: #893900;
  --color-accent-900: #622900;
  --color-accent-950: #3B1800;


  /* ------------------------------------------------------------------------
     SEMANTIC COLOR ALIASES
     To be defined/modified later. Placeholders kept minimal on purpose.
     ------------------------------------------------------------------------ */

  /* Brand / interactive */
  --color-primary:         var(--color-core-700);
  --color-primary-hover:   var(--color-core-600);
  --color-primary-active:  var(--color-core-800);
  --color-primary-subtle:  var(--color-core-100);
  --color-accent-default:  var(--color-accent-500);

  /* Text */
  --color-text:            var(--color-core-neutral-950);
  --color-text-muted:      var(--color-core-neutral-600);
  --color-text-subtle:     var(--color-core-neutral-500);
  --color-text-inverse:    var(--color-core-neutral-50);
  --color-text-link:       var(--color-core-700);

  /* Surfaces & borders */
  --color-surface:         #FFFFFF;
  --color-surface-alt:     var(--color-core-neutral-50);
  --color-surface-dark:    var(--color-core-neutral-950);
  --color-border:          var(--color-core-neutral-200);
  --color-border-strong:   var(--color-core-neutral-400);


  /* ------------------------------------------------------------------------
     SPACING SCALE
     4px base. Use for margin, padding, gap. Semantic aliases (e.g.
     --space-section, --space-card-padding) can be layered on later.
     ------------------------------------------------------------------------ */

  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem; /* 2px */
  --space-1:    0.25rem;  /* 4px */
  --space-1-5:  0.375rem; /* 6px */
  --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 */


  /* ------------------------------------------------------------------------
     RADIUS SCALE
     ------------------------------------------------------------------------ */

  --radius-none: 0;
  --radius-sm:   0.25rem;  /* 4px  — inputs, tags, small buttons */
  --radius-md:   0.5rem;   /* 8px  — buttons, form fields */
  --radius-lg:   0.75rem;  /* 12px — cards, modals */
  --radius-xl:   1rem;     /* 16px — large cards, panels */
  --radius-2xl:  1.5rem;   /* 24px — hero panels, feature blocks */
  --radius-full: 9999px;   /* pills, avatars */


  /* ------------------------------------------------------------------------
     BORDERS
     Widths and a ready-to-use shorthand built from the color aliases above.
     ------------------------------------------------------------------------ */

  --border-width-thin:    1px;
  --border-width-default: 1px;
  --border-width-thick:   2px;
  --border-style: solid;

  --border-default: var(--border-width-default) var(--border-style) var(--color-border);
  --border-strong:  var(--border-width-thick) var(--border-style) var(--color-border-strong);


  /* ------------------------------------------------------------------------
     TYPE — FONT FAMILIES
     ------------------------------------------------------------------------ */

  --font-heading: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter Variable", sans-serif;


  /* ------------------------------------------------------------------------
     TYPE SCALE — desktop values (default)
     Mobile overrides are applied in the media query below.
     ------------------------------------------------------------------------ */

  --text-display-size: 4.5rem;
  --text-display-line-height: 1.05;
  --text-display-tracking: -0.03em;

  --text-h1-size: 3.25rem;
  --text-h1-line-height: 1.08;
  --text-h1-tracking: -0.025em;
  --text-h1-color: var(--color-core-700);

  --text-h2-size: 3rem;
  --text-h2-line-height: 1.1;
  --text-h2-tracking: -0.022em;

  --text-h3-size: 2.5rem;
  --text-h3-line-height: 1.15;
  --text-h3-tracking: -0.02em;
  --text-h3-color: var(--color-core-neutral-800);

  --text-h4-size: 1.875rem;
  --text-h4-line-height: 1.25;
  --text-h4-tracking: -0.015em;

  --text-h5-size: 1.5rem;
  --text-h5-line-height: 1.35;
  --text-h5-tracking: -0.01em;
  /* H5 is used with either color depending on context — no single default baked
     into .text-h5 below. Use .text-h5--core or .text-h5--neutral to pick one. */
  --text-h5-color-core:    var(--color-core-700);
  --text-h5-color-neutral: var(--color-core-neutral-500);

  --text-h6-size: 1.25rem;
  --text-h6-line-height: 1.4;
  --text-h6-tracking: -0.005em;
  --text-h6-color: var(--color-core-700);

  /* Body sizes: only Body Large actually changes at mobile */
  --text-body-lg-size: 1.125rem;
  --text-body-lg-line-height: 1.6;
  --text-body-lg-tracking: -0.011em;

  --text-body-size: 1rem;
  --text-body-line-height: 1.6;
  --text-body-tracking: -0.011em;

  --text-body-sm-size: 0.875rem;
  --text-body-sm-line-height: 1.5;
  --text-body-sm-tracking: -0.006em;

  --text-caption-size: 0.75rem;
  --text-caption-line-height: 1.4;
  --text-caption-tracking: 0em;
}

/* Mobile overrides — matches the "Mobile Size (rem)" column in the type scale */
@media (max-width: 767px) {
  :root {
    --text-display-size: 2.75rem;
    --text-h1-size: 2.25rem;
    --text-h2-size: 2rem;
    --text-h3-size: 1.75rem;
    --text-h4-size: 1.375rem;
    --text-h5-size: 1.25rem;
    --text-h6-size: 1.125rem;
    --text-body-lg-size: 1rem;
    /* Body, Body Small and Caption are fixed at all breakpoints */
  }
}


/* ==========================================================================
   TYPE UTILITY CLASSES
   Bundles each role's size, line-height, tracking, family and (where fixed)
   color into one class, since a single CSS variable can't carry multiple
   properties on its own.
   ========================================================================== */

.text-display { font-family: var(--font-heading); font-size: var(--text-display-size); line-height: var(--text-display-line-height); letter-spacing: var(--text-display-tracking); }
.text-h1      { font-family: var(--font-heading); font-size: var(--text-h1-size);      line-height: var(--text-h1-line-height);      letter-spacing: var(--text-h1-tracking); color: var(--text-h1-color); }
.text-h2      { font-family: var(--font-heading); font-size: var(--text-h2-size);      line-height: var(--text-h2-line-height);      letter-spacing: var(--text-h2-tracking); }
.text-h3      { font-family: var(--font-heading); font-size: var(--text-h3-size);      line-height: var(--text-h3-line-height);      letter-spacing: var(--text-h3-tracking); color: var(--text-h3-color); }
.text-h4      { font-family: var(--font-heading); font-size: var(--text-h4-size);      line-height: var(--text-h4-line-height);      letter-spacing: var(--text-h4-tracking); }
.text-h5      { font-family: var(--font-heading); font-size: var(--text-h5-size);      line-height: var(--text-h5-line-height);      letter-spacing: var(--text-h5-tracking); }
.text-h5--core    { color: var(--text-h5-color-core); }
.text-h5--neutral { color: var(--text-h5-color-neutral); }
.text-h6      { font-family: var(--font-heading); font-size: var(--text-h6-size);      line-height: var(--text-h6-line-height);      letter-spacing: var(--text-h6-tracking); color: var(--text-h6-color); }

.text-body-lg { font-family: var(--font-body); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); letter-spacing: var(--text-body-lg-tracking); }
.text-body    { font-family: var(--font-body); font-size: var(--text-body-size);    line-height: var(--text-body-line-height);    letter-spacing: var(--text-body-tracking); }
.text-body-sm { font-family: var(--font-body); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); letter-spacing: var(--text-body-sm-tracking); }
.text-caption { font-family: var(--font-body); font-size: var(--text-caption-size); line-height: var(--text-caption-line-height); letter-spacing: var(--text-caption-tracking); }