/* ==========================================================================
   Sarrai Design System — colors & type foundations
   Palette anchored on the logo: #3F497F navy + #EB780E orange.
   Vibe: warm & human, Intercom / Front adjacent. Professional but not sterile.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* =========================================================================
     BRAND — primary/accent
     ========================================================================= */
  --brand-navy:         #3F497F;
  --brand-navy-600:     #384171;
  --brand-navy-700:     #2F375E;
  --brand-navy-800:     #252B48;
  --brand-navy-300:     #8A93BA;
  --brand-navy-200:     #C7CBDD;
  --brand-navy-100:     #E7E9F1;
  --brand-navy-50:      #F3F4F9;

  --brand-orange:       #EB780E;
  --brand-orange-600:   #D26A07;
  --brand-orange-700:   #B25904;
  --brand-orange-300:   #F5B06B;
  --brand-orange-200:   #FBDDBD;
  --brand-orange-100:   #FDEEDB;
  --brand-orange-50:    #FFF7EF;

  /* =========================================================================
     NEUTRALS — warm gray, slightly tinted toward the navy for coherence
     ========================================================================= */
  --neutral-0:          #FFFFFF;
  --neutral-25:         #FBFBFD;
  --neutral-50:         #F6F7FA;
  --neutral-100:        #EEEFF4;
  --neutral-200:        #E2E4EC;
  --neutral-300:        #CBCED9;
  --neutral-400:        #9A9FB0;
  --neutral-500:        #6B7088;
  --neutral-600:        #4B5068;
  --neutral-700:        #343852;
  --neutral-800:        #22263C;
  --neutral-900:        #141727;

  /* =========================================================================
     SEMANTIC — status
     ========================================================================= */
  --success:            #1F9D6A;
  --success-bg:         #E4F5ED;
  --success-fg:         #0F6B47;

  --warning:            #D98A0A;
  --warning-bg:         #FDF1DA;
  --warning-fg:         #8A5400;

  --danger:             #D64545;
  --danger-bg:          #FBE5E5;
  --danger-fg:          #902626;

  --info:               #3F72B8;
  --info-bg:            #E4EDF8;
  --info-fg:            #1F4578;

  /* =========================================================================
     SEMANTIC — foreground / background aliases
     ========================================================================= */
  --fg-1:               var(--neutral-800);
  --fg-2:               var(--neutral-700);
  --fg-3:               var(--neutral-500);
  --fg-4:               var(--neutral-400);
  --fg-on-brand:        var(--neutral-0);
  --fg-link:            var(--brand-navy);
  --fg-link-hover:      var(--brand-navy-700);

  --bg-app:             var(--neutral-25);
  --bg-surface:         var(--neutral-0);
  --bg-surface-2:       var(--neutral-50);
  --bg-sunken:          var(--neutral-100);
  --bg-brand:           var(--brand-navy);
  --bg-brand-soft:      var(--brand-navy-50);
  --bg-accent-soft:     var(--brand-orange-50);

  --border-subtle:      var(--neutral-200);
  --border-default:     var(--neutral-300);
  --border-strong:      var(--neutral-500);
  --border-brand:       var(--brand-navy);
  --ring-focus:         color-mix(in oklch, var(--brand-navy) 40%, transparent);

  /* =========================================================================
     TYPOGRAPHY — Inter everywhere, JetBrains Mono for code
     ========================================================================= */
  --font-sans:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:       "Inter", system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.06em;

  /* =========================================================================
     SPACING — 4px base
     ========================================================================= */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* =========================================================================
     RADII
     ========================================================================= */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* =========================================================================
     SHADOWS — soft, warm, low-spread. Navy-tinted.
     ========================================================================= */
  --shadow-xs:  0 1px 2px rgba(37, 43, 72, 0.06);
  --shadow-sm:  0 1px 2px rgba(37, 43, 72, 0.06),
                0 1px 3px rgba(37, 43, 72, 0.08);
  --shadow-md:  0 4px 10px -2px rgba(37, 43, 72, 0.08),
                0 2px 4px -2px rgba(37, 43, 72, 0.06);
  --shadow-lg:  0 12px 24px -8px rgba(37, 43, 72, 0.14),
                0 4px 8px -2px rgba(37, 43, 72, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(37, 43, 72, 0.18);
  --shadow-focus: 0 0 0 4px color-mix(in oklch, var(--brand-navy) 22%, transparent);

  /* =========================================================================
     MOTION
     ========================================================================= */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.6, 0, 0.3, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     260ms;

  /* =========================================================================
     LAYOUT
     ========================================================================= */
  --app-nav-h:         60px;
  --app-sidebar-w:     260px;
  --container-max:     1200px;
  --reading-max:       68ch;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-2);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; line-height: var(--lh-normal); }

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-1);
  font-family: var(--font-display);
  margin: 0 0 var(--s-4) 0;
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }

::selection { background: var(--brand-orange-200); color: var(--brand-navy-800); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-md);
}