/* ============================================================
   ISORIGHT DESIGN SYSTEM — Colors & Typography
   ============================================================ */

/* ---- DM Sans (variable, 300–700) ---- */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/isoright/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/isoright/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/isoright/dm-sans-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/isoright/dm-sans-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- DM Mono ---- */
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/isoright/dm-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/isoright/dm-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/isoright/dm-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/isoright/dm-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   BASE COLOR TOKENS
   ============================================================ */
:root {
  /* Brand Green */
  --color-green-50:  #EAF1E6;
  --color-green-100: #D4E4CC;
  --color-green-200: #BACED2;  /* unused placeholder */
  --color-green-300: #A3C28F;
  --color-green-400: #8FAF7E;   /* PRIMARY — logo green */
  --color-green-500: #7A9A6A;
  --color-green-600: #6A8F5A;   /* hover/press */
  --color-green-700: #527040;
  --color-green-800: #3A5230;
  --color-green-900: #243420;

  /* Neutrals */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F9F9F7;
  --color-neutral-100: #F4F4F2;  /* page background */
  --color-neutral-150: #EBEBEA;
  --color-neutral-200: #E0E0DC;  /* border */
  --color-neutral-300: #C8C8C4;
  --color-neutral-400: #A8A8A4;
  --color-neutral-500: #888884;
  --color-neutral-600: #6A6A66;
  --color-neutral-700: #5C5C58;  /* secondary text */
  --color-neutral-800: #3A3A38;
  --color-neutral-900: #1E1E1C;  /* primary text */

  /* Status */
  --color-success-bg:   #EAF1E6;
  --color-success-text: #3A5230;
  --color-warning-bg:   #FEF3E2;
  --color-warning-text: #7A4F00;
  --color-error-bg:     #FDECEA;
  --color-error-text:   #8B1A1A;
  --color-info-bg:      #E8F0FE;
  --color-info-text:    #1A3A6B;
}

/* ============================================================
   SEMANTIC COLOR TOKENS
   ============================================================ */
:root {
  /* Foreground */
  --fg-primary:    var(--color-neutral-900);
  --fg-secondary:  var(--color-neutral-700);
  --fg-tertiary:   var(--color-neutral-500);
  --fg-disabled:   var(--color-neutral-400);
  --fg-inverse:    var(--color-neutral-0);
  --fg-accent:     var(--color-green-400);

  /* Background */
  --bg-page:       var(--color-neutral-100);
  --bg-surface:    var(--color-neutral-0);
  --bg-subtle:     var(--color-neutral-50);
  --bg-accent:     var(--color-green-50);
  --bg-inverse:    var(--color-neutral-900);

  /* Border */
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --border-accent:  var(--color-green-400);

  /* Brand */
  --brand-primary:  var(--color-green-400);
  --brand-hover:    var(--color-green-600);
  --brand-tint:     var(--color-green-50);

  /* Status */
  --status-success: var(--color-green-400);
  --status-warning: #E6A020;
  --status-error:   #D44040;
  --status-info:    #3B82C4;
}

/* ============================================================
   SHADOWS
   ============================================================ */
:root {
  --shadow-low:  0 1px 3px rgba(0,0,0,0.07);
  --shadow-mid:  0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-high: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

/* ============================================================
   BORDER RADIUS
   ============================================================ */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;
}

/* ============================================================
   SPACING SCALE
   ============================================================ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ============================================================
   TYPOGRAPHY — BASE FONT VARS
   ============================================================ */
:root {
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Menlo', 'Consolas', monospace;

  /* Size scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  /* Weight */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Line height */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;
}