/* ============================================================
   FRESH LEGAL GROUP — Design Tokens
   Color, typography, spacing, radii, shadows, motion.
   Pulled from: client/src/index.css (portal), public/auth-shared.css
   (login/auth), client-portal-ui/admin-login.html (admin), and the
   public landing pages on fresh-legal.com.
   ============================================================ */

/* ----------------------------------------
   1. Typography — webfont imports
   ----------------------------------------
   The brand uses two faces in production:
   - Inter — landing pages, marketing
   - Nunito Sans — client portal (React app)
   Both are loaded from Google Fonts. */

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

:root {
  /* ============================================================
     COLOR SYSTEM
     ============================================================ */

  /* --- Brand core ---
     Deep teal is the primary identity color (auth gradient,
     admin login, hero buttons on portal). Orange is the single
     CTA / accent. Dark navy is used as the deeper end of the
     teal gradient. */
  --teal-900: #173e40;        /* gradient deep end */
  --teal-800: #1a4040;        /* logo box / admin */
  --teal-700: #1a4648;        /* hero gradient mid */
  --teal-600: #2c5d5f;        /* PRIMARY brand teal */
  --teal-500: #3a7374;        /* hover / lighter brand */
  --teal-100: #e6f3f7;        /* tinted info backgrounds */
  --teal-50:  #f0f7f8;        /* faintest wash */

  --orange-700: #c4451f;      /* pressed */
  --orange-600: #e55a2b;      /* hover */
  --orange-500: #ff6b35;      /* PRIMARY accent / CTA */
  --orange-400: #ff8a5c;      /* light tint */
  --orange-100: #ffe8dd;      /* badge/wash */

  /* --- Neutrals (warm-leaning, matches portal) --- */
  --ink-900:    #0f172a;      /* darkest text, "btn-purple" */
  --ink-800:    #1e293b;      /* heading text, slate-800 */
  --ink-700:    #1f2937;      /* body emphasis */
  --ink-600:    #374151;      /* body */
  --ink-500:    #6b7280;      /* muted / labels */
  --ink-400:    #999999;      /* small print */
  --ink-300:    #d7dee5;      /* divider */
  --ink-200:    #e1e5e9;      /* input border */
  --ink-100:    #e9ecef;      /* hairline / fills */
  --ink-50:     #f8f9fa;      /* card-secondary bg */
  --paper:      #ffffff;

  --warm-50:    #fefcf9;      /* fresh-warm — page bg */
  --warm-100:   #f5f1ec;      /* fresh-neutral */

  /* --- Semantic --- */
  --success-700: #166534;
  --success-100: #bbf7d0;
  --success-50:  #f0fdf4;

  --danger-700:  #991b1b;
  --danger-500:  #dc2626;
  --danger-100:  #fecaca;
  --danger-50:   #fef2f2;

  --warn-700:    #92400e;
  --warn-100:    #fde68a;
  --warn-50:     #fffbeb;

  --info-700:    #1e40af;
  --info-100:    #bfdbfe;
  --info-50:     #eff6ff;

  /* --- Foreground / background semantics --- */
  --fg-1:        var(--ink-900);   /* primary text */
  --fg-2:        var(--ink-700);   /* body */
  --fg-3:        var(--ink-500);   /* muted */
  --fg-4:        var(--ink-400);   /* disabled */
  --fg-on-brand: var(--paper);     /* text on teal/orange */
  --fg-link:     var(--teal-600);

  --bg-1:        var(--paper);     /* default canvas */
  --bg-2:        var(--ink-50);    /* secondary surface */
  --bg-3:        var(--warm-50);   /* warm page bg */
  --bg-brand:    var(--teal-600);
  --bg-brand-deep: var(--teal-900);
  --bg-accent:   var(--orange-500);

  --border-1:    var(--ink-200);
  --border-2:    var(--ink-100);
  --border-strong: var(--ink-300);
  --ring-focus:  rgba(255, 107, 53, 0.18);

  /* --- Brand gradients --- */
  --grad-hero: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-900) 100%);
  --grad-auth: radial-gradient(circle at top left, rgba(255,107,53,.18), transparent 30%),
               radial-gradient(circle at bottom right, rgba(44,93,95,.24), transparent 34%),
               linear-gradient(135deg, var(--teal-600) 0%, var(--teal-900) 100%);
  --grad-photo-overlay: linear-gradient(135deg,
      rgba(0,0,0,.7) 0%, rgba(0,0,0,.6) 25%,
      rgba(0,0,0,.5) 50%, rgba(0,0,0,.6) 75%,
      rgba(0,0,0,.8) 100%);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, sans-serif;
  --font-body:    "Nunito Sans", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — landing pages run large (clamp); portal runs tight */
  --fs-12:  0.75rem;     /* 12 — micro, captions */
  --fs-13:  0.8125rem;   /* 13 — eyebrow, fine print */
  --fs-14:  0.875rem;    /* 14 — small */
  --fs-15:  0.9375rem;   /* 15 — body small */
  --fs-16:  1rem;        /* 16 — body */
  --fs-18:  1.125rem;    /* 18 — body large */
  --fs-20:  1.25rem;     /* 20 — h5 */
  --fs-24:  1.5rem;      /* 24 — h4 */
  --fs-30:  1.875rem;    /* 30 — h3 */
  --fs-36:  2.25rem;     /* 36 — h2 sm */
  --fs-48:  3rem;        /* 48 — h2 */
  --fs-60:  3.75rem;     /* 60 — h1 */

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

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.08em;     /* eyebrow uppercase */

  /* ============================================================
     SPACING — 4-pt scale
     ============================================================ */
  --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;

  /* ============================================================
     RADII — soft, generous
     ============================================================ */
  --radius-xs: 6px;     /* small chips */
  --radius-sm: 8px;     /* inputs, alerts */
  --radius-md: 10px;    /* buttons, panels */
  --radius-lg: 12px;    /* cards / inputs at scale */
  --radius-xl: 16px;    /* large cards */
  --radius-2xl: 20px;   /* hero cards (auth) */
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — restrained, blue/black-tinted
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(44, 93, 95, .10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .10);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, .14);
  --shadow-cta: 0 12px 24px rgba(255, 107, 53, .22);
  --shadow-hero-avatar: 0 8px 32px rgba(0, 0, 0, .30);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   450ms;
  --dur-slowest: 2000ms;        /* hero slideshow crossfade */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-narrow: 640px;
  --container:        1080px;
  --container-wide:   1280px;
  --header-height:    72px;
  --z-base:    1;
  --z-overlay: 10;
  --z-popover: 50;
  --z-modal:   100;
  --z-toast:   200;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Drop colors_and_type.css into a page and these apply.
   ============================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5vw, var(--fs-60));
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}
h2 {
  font-size: clamp(1.75rem, 3.5vw, var(--fs-48));
  line-height: var(--lh-snug);
}
h3 { font-size: var(--fs-30); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-24); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
h6 {
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--teal-600);
}

p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--teal-500); text-decoration: underline; }

small { font-size: var(--fs-13); color: var(--fg-3); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

::selection {
  background: var(--orange-100);
  color: var(--ink-900);
}

/* Eyebrow utility — appears throughout marketing pages */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--teal-600);
  background: var(--teal-100);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}