/* ─────────────────────────────────────────────────────────────────
 * Yorizon Design System — Tokens
 * Colors + typography sourced from the YDS 1.0 Figma file
 * (CRU Brand Consultancy). Names match the Figma "Colour Scheme"
 * frame: Primary / Secondary / Tertiary / Neutral / Error scales,
 * plus semantic role tokens (Background, Border, Text/Icon, Status).
 * ──────────────────────────────────────────────────────────────── */

/* Yorizon ships a proprietary "Yorizon" sans. We substitute Inter
 * (closest Google Font match) until brand font files are provided.
 * Replace --yds-font-sans with the real face when available. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── BRAND COLORS ──────────────────────────────────────────────── */
  --yds-utopia:    #D8FF41;  /* PRIMARY / hero accent — "Yorizon Utopia" */
  --yds-contrast:  #0E100A;  /* near-black for AAA on Utopia */
  --yds-clarity:   #FFFFFF;
  --yds-forest:    #363A25;  /* Neutral Variant FOREST (background base) */
  --yds-moss:      #686D4D;  /* Secondary MOSS */
  --yds-lime:      #88A327;  /* Secondary LIME / Tertiary MOSS */
  --yds-lagoon:    #5A8488;  /* Secondary LAGOON */
  --yds-seafoam:   #8EA2A0;  /* Secondary SEAFOAM */
  --yds-sky:       #DFEAE9;  /* Primary SKY */
  --yds-ash:       #7A7A7A;  /* Secondary ASH */
  --yds-stone:     #D1D1D1;  /* Primary STONE */
  --yds-neutral:   #F2F2F2;  /* Primary NEUTRAL */

  /* ── PRIMARY (yellow-green) SCALE ─────────────────────────────── */
  --yds-primary-100: #FFFFFF;
  --yds-primary-99:  #FBFFE0;
  --yds-primary-98:  #F4FFC7;
  --yds-primary-95:  #DCFF5E;
  --yds-primary-90:  #CBF233;
  --yds-primary-80:  #B0D504;
  --yds-primary-70:  #98B800;
  --yds-primary-60:  #809B00;
  --yds-primary-50:  #698000;
  --yds-primary-40:  #536600;
  --yds-primary-35:  #485900;
  --yds-primary-30:  #3E4C00;
  --yds-primary-25:  #344000;
  --yds-primary-20:  #2A3500;
  --yds-primary-15:  #202900;
  --yds-primary-10:  #171E00;
  --yds-primary-5:   #0E1300;
  --yds-primary-0:   #000000;

  /* ── SECONDARY (cool teal-gray) SCALE ─────────────────────────── */
  --yds-secondary-100: #FFFFFF;
  --yds-secondary-99:  #F2FFFD;
  --yds-secondary-98:  #E9FEFB;
  --yds-secondary-95:  #E0F5F3;
  --yds-secondary-90:  #D2E7E4;
  --yds-secondary-80:  #B6CBC8;
  --yds-secondary-70:  #9BAFAD;
  --yds-secondary-60:  #819593;
  --yds-secondary-50:  #677B79;
  --yds-secondary-40:  #4F6260;
  --yds-secondary-35:  #435654;
  --yds-secondary-30:  #384A49;
  --yds-secondary-25:  #2C3F3D;
  --yds-secondary-20:  #213432;
  --yds-secondary-15:  #172928;
  --yds-secondary-10:  #0C1F1E;
  --yds-secondary-5:   #021413;
  --yds-secondary-0:   #000000;

  /* ── TERTIARY (olive moss) SCALE ──────────────────────────────── */
  --yds-tertiary-100: #FFFFFF;
  --yds-tertiary-99:  #FDFFDD;
  --yds-tertiary-98:  #F8FDD4;
  --yds-tertiary-95:  #EFF4CC;
  --yds-tertiary-90:  #E1E6BE;
  --yds-tertiary-80:  #C5CAA4;
  --yds-tertiary-70:  #A9AE8A;
  --yds-tertiary-60:  #8F9471;
  --yds-tertiary-50:  #757A59;
  --yds-tertiary-40:  #5C6142;
  --yds-tertiary-35:  #505537;
  --yds-tertiary-30:  #44492C;
  --yds-tertiary-25:  #393E22;
  --yds-tertiary-20:  #2E3318;
  --yds-tertiary-15:  #23280E;
  --yds-tertiary-10:  #191E05;
  --yds-tertiary-5:   #0F1301;
  --yds-tertiary-0:   #000000;

  /* ── NEUTRAL SCALE ────────────────────────────────────────────── */
  --yds-neutral-100: #FFFFFF;
  --yds-neutral-99:  #FCFCFC;
  --yds-neutral-98:  #FCF8F8;
  --yds-neutral-95:  #F4F0EF;
  --yds-neutral-90:  #E5E2E1;
  --yds-neutral-80:  #C9C6C5;
  --yds-neutral-70:  #ADAAAA;
  --yds-neutral-60:  #929090;
  --yds-neutral-50:  #787776;
  --yds-neutral-40:  #5F5E5E;
  --yds-neutral-35:  #535252;
  --yds-neutral-30:  #484646;
  --yds-neutral-25:  #3C3B3B;
  --yds-neutral-20:  #313030;
  --yds-neutral-15:  #262625;
  --yds-neutral-10:  #1C1B1B;
  --yds-neutral-5:   #111111;
  --yds-neutral-0:   #000000;

  /* ── NEUTRAL VARIANT (forest-tinted) ──────────────────────────── */
  --yds-neutral-variant-100: #FFFFFF;
  --yds-neutral-variant-99:  #FBFFE0;
  --yds-neutral-variant-98:  #F9FCDD;
  --yds-neutral-variant-95:  #F0F3D5;
  --yds-neutral-variant-90:  #E1E5C7;
  --yds-neutral-variant-80:  #C5C9AC;
  --yds-neutral-variant-70:  #AAAE92;
  --yds-neutral-variant-60:  #8F9379;
  --yds-neutral-variant-50:  #757960;
  --yds-neutral-variant-40:  #5C6149;
  --yds-neutral-variant-35:  #50553E;
  --yds-neutral-variant-30:  #454933;
  --yds-neutral-variant-25:  #393D28;
  --yds-neutral-variant-20:  #2E321E;
  --yds-neutral-variant-15:  #242814;
  --yds-neutral-variant-10:  #1A1D0B;

  /* ── ERROR (magenta-rose) SCALE ───────────────────────────────── */
  --yds-error-100: #FFFFFF;
  --yds-error-99:  #FFFBFF;
  --yds-error-98:  #FFF8F7;
  --yds-error-95:  #FFECEE;
  --yds-error-90:  #FFD9DE;
  --yds-error-80:  #FFB2BD;
  --yds-error-70:  #FF869D;
  --yds-error-60:  #FF4E7C;
  --yds-error-50:  #E61A60;
  --yds-error-40:  #BC004B;
  --yds-error-35:  #A60041;
  --yds-error-30:  #900037;
  --yds-error-25:  #7B002E;
  --yds-error-20:  #670025;
  --yds-error-15:  #520020;
  --yds-error-10:  #400014;
  --yds-error-signal: #FF3371;       /* "ERROR" headline swatch */

  /* ── STATUS ───────────────────────────────────────────────────── */
  --yds-success-light: var(--yds-primary-90);     /* #CBF233 */
  --yds-success-dark:  var(--yds-primary-30);     /* #3E4C00 */
  --yds-success-bg:    var(--yds-primary-98);     /* #F4FFC7 */
  --yds-warning-light: #FFA333;
  --yds-warning-dark:  #995400;
  --yds-warning-bg:    #FFF1E0;
  --yds-info-light:    #33CCFF;
  --yds-info-dark:     #007399;
  --yds-info-bg:       #E0F7FF;
  --yds-error-light:   #FFB2BD;
  --yds-error-dark:    #900037;
  --yds-error-bg:      #FFD9DE;

  /* ── BACKGROUND (canvas) ──────────────────────────────────────── */
  --yds-bg-primary:    linear-gradient(180deg, #1E2524 0%, #262E26 50%, #44512A 100%);
  --yds-bg-secondary:  var(--yds-neutral-10);     /* #1C1B1B */
  --yds-bg-dialog:     var(--yds-neutral-20);     /* #313030 */
  --yds-bg-utopia:     var(--yds-utopia);

  /* Glass / overlay containers (on dark) */
  --yds-bg-container-1: rgba(255, 255, 255, 0.08);
  --yds-bg-container-2: rgba(255, 255, 255, 0.16);
  --yds-bg-container-3: rgba(255, 255, 255, 0.24);
  --yds-bg-container-inverse-1: rgba(0, 0, 0, 0.08);
  --yds-bg-container-inverse-2: rgba(0, 0, 0, 0.16);
  --yds-bg-container-inverse-3: rgba(0, 0, 0, 0.24);

  /* ── BORDER ───────────────────────────────────────────────────── */
  --yds-border-primary:   #FFFFFF;
  --yds-border-secondary: #B0B0B0;
  --yds-border-disabled:  #787878;

  /* ── TEXT / ICON ──────────────────────────────────────────────── */
  --yds-text-on-light-primary:   #1C1B1B;  /* Neutral 10 */
  --yds-text-on-light-secondary: #484646;  /* Neutral 30 */
  --yds-text-on-light-disabled:  #5F5E5E;  /* Neutral 40 */
  --yds-text-on-light-success:   #3E4C00;
  --yds-text-on-light-warning:   #995400;
  --yds-text-on-light-error:     #900037;
  --yds-text-on-light-info:      #007399;

  --yds-text-on-dark-primary:    #FFFFFF;          /* Neutral 100 */
  --yds-text-on-dark-secondary:  #E5E2E1;          /* Neutral 90 */
  --yds-text-on-dark-disabled:   #C9C6C5;          /* Neutral 80 */

  /* ── SHADOW ELEVATION ─────────────────────────────────────────── */
  --yds-shadow-card:        0 8px 24px 0 rgba(0,0,0,0.16);
  --yds-shadow-focus-ring:  0 0 0 2px rgba(255,255,255,1);
  --yds-shadow-neon-green:  0 0 32px 0 rgba(216, 255, 65, 0.45);
  --yds-shadow-soft:        0 4px 4px 0 rgba(0,0,0,0.25);

  /* ── RADII ────────────────────────────────────────────────────── */
  --yds-radius-xs:  4px;
  --yds-radius-sm:  5px;   /* button surface */
  --yds-radius-md:  8px;   /* chip / tag / swatch */
  --yds-radius-lg:  16px;  /* card */
  --yds-radius-xl:  24px;
  --yds-radius-pill: 999px;

  /* ── SPACING (4px base) ───────────────────────────────────────── */
  --yds-space-0:  0;
  --yds-space-1:  4px;
  --yds-space-2:  8px;
  --yds-space-3:  12px;
  --yds-space-4:  16px;
  --yds-space-5:  20px;
  --yds-space-6:  24px;
  --yds-space-8:  32px;
  --yds-space-10: 40px;
  --yds-space-12: 48px;
  --yds-space-16: 64px;
  --yds-space-20: 80px;

  /* ── TYPE SYSTEM ──────────────────────────────────────────────── */
  /* "Yorizon" → Inter (Google Fonts substitution — see README).
   * "Favorit Std Book" → Archivo (used for very large display lockups).
   * "Roboto" / "Inter" used for body / labels in the Figma. */
  --yds-font-sans:    "Inter", "Helvetica Neue", system-ui, sans-serif;
  --yds-font-display: "Archivo", "Inter", system-ui, sans-serif;
  --yds-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Material-3 style type ramp — values from /Style/Typography frame */
  /* Display */
  --yds-type-display-large-size:    57px;
  --yds-type-display-large-lh:      64px;
  --yds-type-display-large-tracking:-0.25px;
  --yds-type-display-medium-size:   45px;
  --yds-type-display-medium-lh:     52px;
  --yds-type-display-small-size:    36px;
  --yds-type-display-small-lh:      44px;

  /* Headline */
  --yds-type-headline-large-size:   32px;
  --yds-type-headline-large-lh:     40px;
  --yds-type-headline-medium-size:  28px;
  --yds-type-headline-medium-lh:    36px;
  --yds-type-headline-small-size:   24px;
  --yds-type-headline-small-lh:     32px;

  /* Title (SemiBold) */
  --yds-type-title-large-size:      22px;
  --yds-type-title-large-lh:        28px;
  --yds-type-title-large-tracking:  0;
  --yds-type-title-medium-size:     16px;
  --yds-type-title-medium-lh:       24px;
  --yds-type-title-medium-tracking: 0.15px;
  --yds-type-title-small-size:      14px;
  --yds-type-title-small-lh:        20px;
  --yds-type-title-small-tracking:  0.1px;

  /* Body */
  --yds-type-body-large-size:    16px;
  --yds-type-body-large-lh:      24px;
  --yds-type-body-large-tracking:0.5px;
  --yds-type-body-medium-size:   14px;
  --yds-type-body-medium-lh:     20px;
  --yds-type-body-medium-tracking:0.25px;
  --yds-type-body-small-size:    12px;
  --yds-type-body-small-lh:      16px;
  --yds-type-body-small-tracking:0.4px;

  /* Label (Bold) */
  --yds-type-label-large-size:    14px;
  --yds-type-label-large-lh:      20px;
  --yds-type-label-large-tracking:0.1px;
  --yds-type-label-medium-size:   12px;
  --yds-type-label-medium-lh:     16px;
  --yds-type-label-medium-tracking:0.5px;
  --yds-type-label-small-size:    11px;
  --yds-type-label-small-lh:      16px;
  --yds-type-label-small-tracking:0.5px;
}

/* ────────────────────────────────────────────────────────────────
 * Semantic typography classes — wrap the tokens above
 * ──────────────────────────────────────────────────────────────── */

.yds-display-large,
.yds-display-medium,
.yds-display-small,
.yds-headline-large,
.yds-headline-medium,
.yds-headline-small {
  font-family: var(--yds-font-sans);
  font-weight: 400;
  letter-spacing: 0;
}

.yds-display-large  { font-size: var(--yds-type-display-large-size);  line-height: var(--yds-type-display-large-lh);  letter-spacing: var(--yds-type-display-large-tracking); }
.yds-display-medium { font-size: var(--yds-type-display-medium-size); line-height: var(--yds-type-display-medium-lh); }
.yds-display-small  { font-size: var(--yds-type-display-small-size);  line-height: var(--yds-type-display-small-lh);  }
.yds-headline-large { font-size: var(--yds-type-headline-large-size); line-height: var(--yds-type-headline-large-lh); }
.yds-headline-medium{ font-size: var(--yds-type-headline-medium-size);line-height: var(--yds-type-headline-medium-lh);}
.yds-headline-small { font-size: var(--yds-type-headline-small-size); line-height: var(--yds-type-headline-small-lh);  }

.yds-title-large,
.yds-title-medium,
.yds-title-small {
  font-family: var(--yds-font-sans);
  font-weight: 600;
}
.yds-title-large  { font-size: var(--yds-type-title-large-size);  line-height: var(--yds-type-title-large-lh);  letter-spacing: var(--yds-type-title-large-tracking); }
.yds-title-medium { font-size: var(--yds-type-title-medium-size); line-height: var(--yds-type-title-medium-lh); letter-spacing: var(--yds-type-title-medium-tracking);}
.yds-title-small  { font-size: var(--yds-type-title-small-size);  line-height: var(--yds-type-title-small-lh);  letter-spacing: var(--yds-type-title-small-tracking); }

.yds-body-large,
.yds-body-medium,
.yds-body-small {
  font-family: var(--yds-font-sans);
  font-weight: 400;
}
.yds-body-large  { font-size: var(--yds-type-body-large-size);  line-height: var(--yds-type-body-large-lh);  letter-spacing: var(--yds-type-body-large-tracking); }
.yds-body-medium { font-size: var(--yds-type-body-medium-size); line-height: var(--yds-type-body-medium-lh); letter-spacing: var(--yds-type-body-medium-tracking); }
.yds-body-small  { font-size: var(--yds-type-body-small-size);  line-height: var(--yds-type-body-small-lh);  letter-spacing: var(--yds-type-body-small-tracking); }

.yds-label-large,
.yds-label-medium,
.yds-label-small {
  font-family: var(--yds-font-sans);
  font-weight: 700;
  text-transform: none;
}
.yds-label-large  { font-size: var(--yds-type-label-large-size);  line-height: var(--yds-type-label-large-lh);  letter-spacing: var(--yds-type-label-large-tracking); }
.yds-label-medium { font-size: var(--yds-type-label-medium-size); line-height: var(--yds-type-label-medium-lh); letter-spacing: var(--yds-type-label-medium-tracking); }
.yds-label-small  { font-size: var(--yds-type-label-small-size);  line-height: var(--yds-type-label-small-lh);  letter-spacing: var(--yds-type-label-small-tracking); }

/* Convenience aliases */
h1 { @apply yds-headline-large; }
h2 { @apply yds-headline-medium; }
h3 { @apply yds-headline-small; }