/* ============================================================
   Yönetişim (NewGovernance) Design Tokens
   Source: the NewGovernance design system in Claude Design.
   Foundation layer only — copied faithfully so it stays
   recognizable and re-syncable. Applied styling lives in app.css.
   Fonts are loaded via a <link> in base.html (not @import here).
   ============================================================ */

/* ============================================================
   Colors — brand lime green #95CC45 + cool grey #7B7C80
   ============================================================ */
:root {
  /* --- Brand green scale (primary) --- */
  --green-50:  #f2f9e7;
  --green-100: #e2f1c9;
  --green-200: #cbe79c;
  --green-300: #b4dc6f;
  --green-400: #a3d456;
  --green-500: #95cc45;   /* BRAND green */
  --green-600: #7cb02f;
  --green-700: #618a26;
  --green-800: #4c6c22;
  --green-900: #3f5a20;
  --green-950: #21320e;

  /* --- Cool grey neutral scale --- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8f8;
  --neutral-100: #eff0f1;
  --neutral-200: #e2e4e5;
  --neutral-300: #cbced0;
  --neutral-400: #a9adb0;
  --neutral-500: #7b7c80;  /* BRAND grey */
  --neutral-600: #616367;
  --neutral-700: #4a4c50;
  --neutral-800: #34363a;
  --neutral-900: #1f2124;
  --neutral-950: #131417;

  /* --- Semantic hues --- */
  --success-100: #dff4e6;
  --success-500: #1f9d57;
  --success-700: #157043;

  --warning-100: #fdefd0;
  --warning-500: #e69412;
  --warning-700: #a86608;

  --danger-100: #fbe0e1;
  --danger-500: #dc4c50;
  --danger-700: #a72d33;

  --info-100: #dde9fb;
  --info-500: #3576e0;
  --info-700: #2456ac;

  /* ============================================================
     Semantic aliases — use THESE in components
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--neutral-50);
  --surface-card:      var(--neutral-0);
  --surface-raised:    var(--neutral-0);
  --surface-sunken:    var(--neutral-100);
  --surface-inverse:   var(--neutral-900);
  --surface-hover:     var(--neutral-100);
  --surface-active:    var(--neutral-200);
  --surface-brand-subtle: var(--green-50);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-inverse:  var(--neutral-0);
  --text-brand:    var(--green-700);
  --text-on-brand: var(--neutral-900);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--green-500);
  --border-focus:   var(--green-600);

  /* Brand / actions */
  --brand:            var(--green-500);
  --brand-hover:      var(--green-600);
  --brand-active:     var(--green-700);
  --brand-contrast:   var(--neutral-900); /* text on brand-filled surfaces */

  /* Semantic text/fills */
  --success:      var(--success-500);
  --success-bg:   var(--success-100);
  --warning:      var(--warning-500);
  --warning-bg:   var(--warning-100);
  --danger:       var(--danger-500);
  --danger-bg:    var(--danger-100);
  --info:         var(--info-500);
  --info-bg:      var(--info-100);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--green-500) 45%, transparent);
}

/* ============================================================
   Typography
   ============================================================ */
:root {
  /* Families */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* Type scale (1.20 minor-third-ish, tuned) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* base UI */
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 46px;
  --text-6xl: 60px;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;

  /* Semantic roles */
  --display-font: var(--font-display);
  --display-weight: var(--weight-extra);
  --display-tracking: var(--tracking-tight);

  --heading-font: var(--font-sans);
  --heading-weight: var(--weight-bold);

  --body-font: var(--font-sans);
  --body-weight: var(--weight-regular);

  --label-weight: var(--weight-semibold);
  --overline-tracking: var(--tracking-caps);
}

/* ============================================================
   Spacing, Radii, Shadows, Layout, Motion
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Radii — rounded, friendly (matches the wordmark) */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Shadows — soft, cool-grey tinted, low spread */
  --shadow-xs: 0 1px 2px rgba(31, 33, 36, 0.06);
  --shadow-sm: 0 1px 3px rgba(31, 33, 36, 0.08), 0 1px 2px rgba(31, 33, 36, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 33, 36, 0.08), 0 2px 4px rgba(31, 33, 36, 0.04);
  --shadow-lg: 0 12px 28px rgba(31, 33, 36, 0.10), 0 4px 10px rgba(31, 33, 36, 0.05);
  --shadow-xl: 0 24px 48px rgba(31, 33, 36, 0.14), 0 8px 16px rgba(31, 33, 36, 0.06);
  --shadow-brand: 0 6px 18px color-mix(in srgb, var(--green-500) 35%, transparent);
  --shadow-inner: inset 0 1px 2px rgba(31, 33, 36, 0.07);

  /* Layout */
  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --sidebar-width: 264px;
  --topbar-height: 64px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* Z-index */
  --z-sticky: 100;
  --z-dropdown: 500;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* ============================================================
   Base / typographic utility classes (opt-in .ys-* classes)
   Kept minimal; components carry their own styling via tokens.
   ============================================================ */
.ys-root,
.ys-page {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ys-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.ys-h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--text-strong); }
.ys-h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); color: var(--text-strong); }
.ys-h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-strong); }
.ys-body { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-normal); }
.ys-small { font-size: var(--text-sm); color: var(--text-muted); }
.ys-overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ys-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }