/* =========================================================
   LANDJOURNEY DESIGN TOKENS
   Source: user-interfaces/projects/common/src/lib/ui-styles/tokens/*
   and themes/light/colors.scss
   ========================================================= */

/* Inter — self-hosted brand fonts (variable TTF, opsz+wght axes) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-variation-settings: 'opsz' auto;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-variation-settings: 'opsz' auto;
}

/* Inter is the ONLY type family in the Landjourney system. */

:root {
  /* ---------- RAW PALETTE ---------- */

  /* Greens — brand primary */
  --green-100: #daedd5;
  --green-200: #b8d6b0;
  --green-300: #bcdbb4;
  --green-400: #79b669;
  --green-450: #2b9e67;
  --green-470: #2b9663;   /* <-- primary brand green (logo cls-1) */
  --green-500: #1f8505;
  --green-600: #155a03;
  --green-650: #24503a;
  --green-700: #104502;
  --green-720: #15452e;
  --green-730: #273b39;
  --green-750: #093b23;
  --green-800: #0b2e02;

  /* Blues — brand secondary */
  --blue-100: #edf1f7;
  --blue-200: #d0dceb;
  --blue-300: #90abd0;
  --blue-400: #6c8fc1;
  --blue-500: #4a74b0;
  --blue-600: #3b5d8c;
  --blue-700: #2c4568;
  --blue-800: #1d2e45;

  /* (Removed) Gold/brown tertiary ramp — Landjourney is green-only.
     Legacy --yellow-* names remain as ALIASES onto the primary green ramp so
     any component code that still references them keeps compiling. */
  --yellow-100: var(--green-100);
  --yellow-200: var(--green-200);
  --yellow-300: var(--green-300);
  --yellow-400: var(--green-400);
  --yellow-500: var(--green-470);
  --yellow-600: var(--green-600);
  --yellow-700: var(--green-700);
  --yellow-800: var(--green-800);

  /* Lime — highlight accents (see logo lighter highlight #88ffc0) */
  --lime-100: #f0fff7;
  --lime-200: #bdffdc;
  --lime-600: #88ffc0;   /* logo cls-2 */
  --lime-700: #24ff8b;

  /* Neutrals — "black" scale (used heavily for text + surfaces) */
  --black-100: #ffffff;
  --black-200: #f5f5f5;
  --black-300: #c9c9c9;
  --black-400: #b0b0b0;
  --black-500: #7d7d7d;
  --black-600: #4a4a4a;
  --black-700: #1f1f1f;
  --black-800: #181818;

  /* Grays — page/surface backgrounds */
  --gray-100: #f6f6f6;
  --gray-200: #e7e7e7;
  --gray-300: #e8e7e3;
  --gray-400: #d9d9d9;
  --gray-470: #c9c9c9;
  --gray-480: #a7a7a7;
  --gray-500: #6e726e;
  --gray-600: #3b3d3b;
  --gray-650: #313131;
  --gray-670: #252525;

  /* Decorative — sage only. Gold tokens removed / aliased to green. */
  --sage-100: #dfe9dc;
  --gold-100: var(--green-100);
  --gold-200: var(--green-200);
  --gold-300: var(--green-300);

  /* ---------- SEMANTIC BRAND RAMPS ---------- */

  --brand-primary-100: var(--green-100);
  --brand-primary-200: var(--green-200);
  --brand-primary-300: var(--green-300);
  --brand-primary-400: var(--green-400);
  --brand-primary-500: var(--green-470);   /* the "it" green */
  --brand-primary-600: var(--green-600);
  --brand-primary-700: var(--green-700);
  --brand-primary-800: var(--green-800);

  --brand-secondary-100: var(--blue-100);
  --brand-secondary-500: var(--blue-500);
  --brand-secondary-700: var(--blue-700);
  --brand-secondary-800: var(--blue-800);

  /* Tertiary ramp is aliased onto the primary green — there is no gold accent. */
  --brand-tertiary-100: var(--brand-primary-100);
  --brand-tertiary-300: var(--brand-primary-300);
  --brand-tertiary-500: var(--brand-primary-500);
  --brand-tertiary-700: var(--brand-primary-700);

  --accent-highlight-100: var(--lime-100);
  --accent-highlight-600: var(--lime-600);
  --accent-highlight-700: var(--lime-700);

  /* ---------- STATUS ---------- */
  --status-success-100: #e6faf0;
  --status-success-500: #41d78f;
  --status-success-600: #27b973;
  --status-success-700: #1e8f59;
  --status-success-800: #15653f;

  --status-warning-100: #fef7ec;
  --status-warning-500: #f3b75e;
  --status-warning-600: #efa22f;
  --status-warning-700: #da8911;

  --status-error-100: #fceae9;
  --status-error-500: #e9655d;
  --status-error-700: #c5241b;
  --status-error-800: #991c15;

  /* ---------- SEMANTIC SURFACES / TEXT ---------- */
  --content-background-color: var(--gray-100);
  --box-border-color: #eaebf0;

  --color-background-main:    var(--black-100);  /* cards / inputs */
  --color-background-modal:   var(--black-200);
  --color-background-secondary: #f4f4f2;
  --color-background-light-grey: #f4f4f2;

  --color-text-main:     var(--black-700);
  --color-text-strong:   var(--black-800);
  --color-text-inverse:  var(--black-100);
  --color-text-title:    var(--brand-primary-500);   /* H1/H3 — brand green */
  --color-text-h3:       var(--brand-primary-500);
  --color-text-not-selected: #797979;
  --placeholder-color: #797979;

  --color-border:        var(--black-300);
  --color-border-strong: var(--black-600);

  --icons-positive: var(--black-800);
  --icons-negative: var(--black-100);

  /* Sidebar (client-web-app main nav) */
  --sidebar-background: var(--brand-primary-500);
  --sidebar-footer-background: var(--brand-primary-400);
  --nav-link-text-color: var(--black-100);
  --nav-link-active-color: var(--brand-primary-800);

  /* Buttons (LJ Button v2 tokens) — all green, no gold */
  --color-background-primary-button: var(--brand-primary-500);
  --color-foreground-primary-button: var(--black-100);
  --color-border-primary-button: var(--color-background-primary-button);

  --color-background-secondary-button: var(--brand-primary-100);
  --color-foreground-secondary-button: var(--brand-primary-700);
  --color-border-secondary-button: var(--color-background-secondary-button);

  --color-background-tertiary-button: var(--black-100);
  --color-foreground-tertiary-button: var(--brand-primary-500);
  --color-border-tertiary-button: var(--color-foreground-tertiary-button);

  /* Login / marketing gradients */
  --login-page: var(--brand-primary-500);
  --login-page-gradient: linear-gradient(
    var(--brand-primary-100) 0%,
    var(--brand-primary-500) 50%,
    var(--brand-primary-100) 100%
  );
  --fatal-error-background: linear-gradient(
    180deg,
    var(--brand-primary-400) 14%,
    var(--brand-primary-800) 94%
  );

  /* ---------- TYPOGRAPHY ----------
     Landjourney uses Inter for EVERYTHING: body, UI, titles, numerals, legal.
     All --font-family-* aliases resolve to Inter so existing component code keeps working. */
  --font-family-primary:   'Inter', system-ui, sans-serif;
  --font-family-secondary: 'Inter', system-ui, sans-serif;
  --font-family-tertiary:  'Inter', system-ui, sans-serif;
  --font-family-cursive:   'Inter', system-ui, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 900;

  /* Mobile-first size scale */
  --font-size-xxs: 0.75rem;   /* 12 */
  --font-size-xs:  0.875rem;  /* 14 */
  --font-size-sm:  1rem;      /* 16 */
  --font-size-md:  1.125rem;  /* 18 */
  --font-size-lg:  1.25rem;   /* 20 */
  --font-size-xl:  1.5rem;    /* 24 */
  --font-size-2xl: 2rem;      /* 32 */
  --font-size-3xl: 2.5rem;    /* 40 */
  --font-size-4xl: 3rem;      /* 48 */

  --line-height-xxxs: 0.625rem;
  --line-height-xxs:  0.75rem;
  --line-height-xs:   1rem;
  --line-height-sm:   1.5rem;
  --line-height-md:   2rem;
  --line-height-lg:   2.5rem;
  --line-height-xl:   3rem;

  /* ---------- SPACING ---------- */
  --gap-reset: 0;
  --gap-tight:       0.125rem;  /* 2 */
  --gap-compact:     0.25rem;   /* 4 */
  --gap-default:     0.5rem;    /* 8 */
  --gap-comfortable: 0.75rem;   /* 12 */
  --gap-spacious:    1.5rem;    /* 24 */

  --padding-reset: 0;
  --padding-tight:       0.125rem;
  --padding-compact:     0.25rem;
  --padding-default:     0.5rem;
  --padding-comfortable: 0.75rem;
  --padding-spacious:    1.5rem;

  /* ---------- RADII ---------- */
  --radius-reset:   0;
  --radius-tight:   0.125rem;   /* 2  — subtle, inputs */
  --radius-primary: 0.25rem;    /* 4  — LJ Button v1 default */
  --radius-strong:  0.5rem;     /* 8  — LJ Button v2 / cards */
  --radius-rounded: 62.5rem;    /* pills, avatars */

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 4px 0 rgba(0,0,0,.10);
  --shadow-sm: 0 1px 6px 0 rgba(0,0,0,.15);
  --shadow-md: 0 2px 10px 0 rgba(0,0,0,.15);
  --shadow-lg: 0 4px 14px 0 rgba(0,0,0,.25);
  --shadow-xl: 0 6px 20px 0 rgba(0,0,0,.25);
  --color-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
}

@media (min-width: 1024px) {
  :root {
    --font-size-xxs: 0.75rem;
    --font-size-xs:  0.875rem;
    --font-size-sm:  1.125rem;
    --font-size-md:  1.25rem;
    --font-size-lg:  1.5rem;
    --font-size-xl:  2rem;
    --font-size-2xl: 2.5rem;
    --font-size-3xl: 3.5rem;
    --font-size-4xl: 4.5rem;

    --line-height-xxxs: 0.75rem;
    --line-height-xxs:  0.875rem;
    --line-height-xs:   1.375rem;
    --line-height-sm:   1.75rem;
    --line-height-md:   2.25rem;
    --line-height-lg:   3rem;
    --line-height-xl:   4rem;
  }
}

/* ---------- TYPE UTILITIES ---------- */
body, html { font-family: var(--font-family-primary); color: var(--color-text-main); }

.title-4xl { font-size: var(--font-size-4xl); line-height: var(--line-height-xl); font-weight: var(--font-weight-semi-bold); }
.title-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-lg); font-weight: var(--font-weight-semi-bold); }
.title-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-lg); font-weight: var(--font-weight-semi-bold); }
.title-xl  { font-size: var(--font-size-xl);  line-height: var(--line-height-md); font-weight: var(--font-weight-medium); }
.title-lg  { font-size: var(--font-size-lg);  line-height: var(--line-height-md); font-weight: var(--font-weight-medium); }

.body-lg, .body-l { font-size: var(--font-size-md); line-height: var(--line-height-md); font-weight: var(--font-weight-regular); }
.body-md, .body-m { font-size: var(--font-size-sm); line-height: var(--line-height-sm); font-weight: var(--font-weight-regular); }
.body-sm, .body-s { font-size: var(--font-size-xs); line-height: var(--line-height-xs); font-weight: var(--font-weight-regular); }
.body-xs          { font-size: var(--font-size-xxs); line-height: var(--line-height-xxs); font-weight: var(--font-weight-light); }

.oswald, .inter, .cursive { font-family: 'Inter', system-ui, sans-serif; }
.numeral { font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }