/* ============================================================
   Automis Design System — Color & Type Tokens
   "ONE SYSTEM. EVERY WORKFLOW."
   ============================================================ */

/* ---------- FONTS ---------- */
/* Manrope is the brand typeface. Self-hosted (OFL — see fonts/OFL.txt).
   The variable font covers 200–800; static files are provided as fallback. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Manrope-VariableFont_wght.ttf") format("truetype");
}
/* Static fallbacks — used by older browsers that don't support font-weight ranges */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Manrope-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Manrope-Light.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Manrope-Regular.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Manrope-Medium.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Manrope-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Manrope-Bold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Manrope-ExtraBold.ttf") format("truetype"); }

:root {
  /* ============================================================
     COLORS — Brand palette (per brand-guide-overview.png)
     ============================================================ */

  /* Brand greens (PRIMARY palette) */
  --au-green-primary: #0B3D1E;    /* Forest — text, headers, primary surfaces */
  --au-green-secondary: #1FA64A;  /* Signal — primary CTA, logo accent */
  --au-green-accent: #7ED321;     /* Vivid lime — highlights, charts, focus rings */
  --au-green-light: #E8F5EB;      /* Tint — soft surfaces, hover, hint bg */
  --au-white: #FFFFFF;

  /* Extended green ramp (derived for tailwind-style usage) */
  --au-green-50:  #F2FBF4;
  --au-green-100: #E8F5EB;        /* = light */
  --au-green-200: #C8E9D0;
  --au-green-300: #9CD8AC;
  --au-green-400: #5BC178;
  --au-green-500: #1FA64A;        /* = secondary, main brand */
  --au-green-600: #178A3D;
  --au-green-700: #126E31;
  --au-green-800: #0E5527;
  --au-green-900: #0B3D1E;        /* = primary */
  --au-green-950: #062712;

  /* Lime accent ramp (for highlights/charts) */
  --au-lime-300: #B6E875;
  --au-lime-400: #9ADD49;
  --au-lime-500: #7ED321;         /* = accent */
  --au-lime-600: #62AC18;

  /* Neutrals — slate scale (matches Tailwind slate, used through the app) */
  --au-slate-50:  #F8FAFC;
  --au-slate-100: #F1F5F9;        /* default app background */
  --au-slate-200: #E2E8F0;        /* card borders */
  --au-slate-300: #CBD5E1;
  --au-slate-400: #94A3B8;        /* placeholder, muted icons */
  --au-slate-500: #64748B;
  --au-slate-600: #475569;        /* body subdued */
  --au-slate-700: #334155;        /* body strong */
  --au-slate-800: #1E293B;
  --au-slate-900: #0F172A;        /* headings */

  /* Semantic — status colors (traffic-light / "luksafora" principle) */
  --au-status-new:        #2563EB;  /* JAUNS — blue 600 */
  --au-status-new-bg:     #DBEAFE;
  --au-status-progress:   #D97706;  /* DARBĪBĀ — amber 600 */
  --au-status-progress-bg:#FEF3C7;
  --au-status-done:       #059669;  /* PABEIGTS — emerald 600 */
  --au-status-done-bg:    #D1FAE5;
  --au-status-blocked:    #DC2626;  /* blocked / overdue — red 600 */
  --au-status-blocked-bg: #FEE2E2;

  /* Site-category accents (from utils.tsx) */
  --au-site-uas: #2563EB;   /* ŪAS — water */
  --au-site-kss: #EA580C;   /* KSS — heat */
  --au-site-nai: #059669;   /* NAI — housing */
  --au-site-ges: #475569;   /* GES — generic */

  /* Foreground / background tokens (semantic) */
  --au-fg-1:    var(--au-slate-900);  /* headlines */
  --au-fg-2:    var(--au-slate-700);  /* body */
  --au-fg-3:    var(--au-slate-500);  /* muted */
  --au-fg-4:    var(--au-slate-400);  /* placeholder */
  --au-fg-brand:var(--au-green-900);  /* brand-on-light wordmark */
  --au-fg-on-brand: var(--au-white);

  --au-bg-app:    var(--au-slate-100);
  --au-bg-card:   var(--au-white);
  --au-bg-muted:  var(--au-slate-50);
  --au-bg-brand:  var(--au-green-900); /* dark forest header */
  --au-bg-brand-soft: var(--au-green-100);

  --au-border:        var(--au-slate-200);
  --au-border-strong: var(--au-slate-300);
  --au-border-brand:  var(--au-green-200);

  /* Focus ring */
  --au-ring: 0 0 0 3px rgba(31, 166, 74, 0.35);

  /* ============================================================
     TYPOGRAPHY — Manrope
     ============================================================ */
  --au-font-sans: "Manrope", "Inter", system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;
  --au-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights used by the brand */
  --au-w-light:    300; /* @kind font */
  --au-w-regular:  400; /* @kind font */
  --au-w-medium:   500; /* @kind font */
  --au-w-semibold: 600; /* @kind font */
  --au-w-bold:     700; /* @kind font */
  --au-w-black:    800; /* @kind font */

  /* Type scale (mobile-first, generous for outdoor / field use) */
  --au-fs-xs:   12px;   --au-lh-xs: 16px;
  --au-fs-sm:   14px;   --au-lh-sm: 20px;
  --au-fs-base: 16px;   --au-lh-base: 24px;
  --au-fs-lg:   18px;   --au-lh-lg: 28px;
  --au-fs-xl:   20px;   --au-lh-xl: 28px;
  --au-fs-2xl:  24px;   --au-lh-2xl: 32px;
  --au-fs-3xl:  30px;   --au-lh-3xl: 36px;
  --au-fs-4xl:  36px;   --au-lh-4xl: 40px;
  --au-fs-5xl:  48px;   --au-lh-5xl: 52px;
  --au-fs-6xl:  64px;   --au-lh-6xl: 68px;

  /* ============================================================
     SPACING / RADII / SHADOWS / MOTION
     ============================================================ */
  --au-space-1: 4px;
  --au-space-2: 8px;
  --au-space-3: 12px;
  --au-space-4: 16px;
  --au-space-5: 20px;
  --au-space-6: 24px;
  --au-space-8: 32px;
  --au-space-10: 40px;
  --au-space-12: 48px;
  --au-space-16: 64px;

  --au-r-sm:  6px;
  --au-r-md:  10px;
  --au-r-lg:  12px;
  --au-r-xl:  16px;
  --au-r-2xl: 20px;
  --au-r-full: 9999px;

  /* Mintlify-style elevation — softer, more refined. Borders carry weight, not shadows. */
  --au-shadow-card:       0 1px 2px rgba(11,61,30,.04);
  --au-shadow-card-hover: 0 4px 12px rgba(11,61,30,.06), 0 1px 3px rgba(11,61,30,.04);
  --au-shadow-lg:         0 12px 24px -8px rgba(11,61,30,.08), 0 4px 8px -2px rgba(11,61,30,.04);
  --au-shadow-glow:       0 0 0 1px rgba(31,166,74,.16), 0 8px 24px -8px rgba(31,166,74,.30);
  --au-shadow-inner:      inset 0 1px 2px rgba(11,61,30,.04);

  /* Aurora — subtle hero gradient (use sparingly, ~6% alpha) */
  --au-aurora: radial-gradient(60% 80% at 20% 10%, rgba(126,211,33,.18), transparent 60%),
               radial-gradient(50% 60% at 80% 30%, rgba(31,166,74,.14), transparent 60%); /* @kind color */

  --au-ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --au-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --au-dur-fast:    150ms; /* @kind other */
  --au-dur-base:    220ms; /* @kind other */
  --au-dur-slow:    400ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop colors_and_type.css into a page and headings / body /
   inputs adopt the brand by default.
   ============================================================ */
html, body {
  font-family: var(--au-font-sans);
  font-size: var(--au-fs-base);
  line-height: 1.5;
  color: var(--au-fg-1);
  background: var(--au-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mintlify-style headings: tighter tracking, semi-bold default (not black), more breathing room */
h1 { font-size: var(--au-fs-5xl); line-height: 1.1;  font-weight: var(--au-w-bold);     letter-spacing: -0.03em; color: var(--au-fg-1); }
h2 { font-size: var(--au-fs-3xl); line-height: 1.2;  font-weight: var(--au-w-semibold); letter-spacing: -0.02em;  color: var(--au-fg-1); }
h3 { font-size: var(--au-fs-2xl); line-height: 1.3;  font-weight: var(--au-w-semibold); letter-spacing: -0.015em; color: var(--au-fg-1); }
h4 { font-size: var(--au-fs-xl);  line-height: 1.4;  font-weight: var(--au-w-semibold); color: var(--au-fg-1); }
h5 { font-size: var(--au-fs-lg);  line-height: 1.4;  font-weight: var(--au-w-semibold); color: var(--au-fg-1); }
h6 {
  font-size: var(--au-fs-xs); line-height: 1.4;
  font-weight: var(--au-w-bold); letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--au-fg-3);
}

/* Prose / long-form reading — reading-optimised, like Mintlify docs */
.au-prose { font-size: 16px; line-height: 1.7; color: var(--au-fg-2); max-width: 70ch; }
.au-prose p + p { margin-top: 1.1em; }
.au-prose h2 { margin-top: 2.2em; }
.au-prose h3 { margin-top: 1.8em; }

p     { color: var(--au-fg-2); }
small { font-size: var(--au-fs-sm); color: var(--au-fg-3); }
code, pre { font-family: var(--au-font-mono); font-size: 0.92em; }

a { color: var(--au-green-700); text-decoration: none; }
a:hover { color: var(--au-green-800); text-decoration: underline; }

/* Form controls — outdoor-legible defaults (mirrors index.html in repo) */
input, select, textarea {
  font-family: inherit;
  font-size: var(--au-fs-base) !important;  /* prevent iOS zoom */
  color: var(--au-fg-1);
  background: var(--au-white);
  border: 2px solid var(--au-border);
  border-radius: var(--au-r-md);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--au-dur-fast) var(--au-ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--au-green-500);
  box-shadow: var(--au-ring);
}
::placeholder { color: var(--au-fg-4); }

/* Utility classes for quickly pulling in brand styles ----------- */
.au-display { font-weight: var(--au-w-black); letter-spacing: -0.02em; }
.au-eyebrow { font-size: var(--au-fs-xs); font-weight: var(--au-w-black); text-transform: uppercase; letter-spacing: 0.14em; color: var(--au-green-700); }
.au-mono    { font-family: var(--au-font-mono); }
.au-card    { background: var(--au-bg-card); border: 1px solid var(--au-border); border-radius: var(--au-r-xl); box-shadow: var(--au-shadow-card); }
.au-card-strong { background: var(--au-bg-card); border: 2px solid var(--au-border); border-radius: var(--au-r-xl); box-shadow: var(--au-shadow-card); }