/*
  Loop Litigation LLC — Design Tokens (CSS Custom Properties)
  ==============================================================
  Source of truth for every color, type, space, radius, shadow,
  breakpoint, z-index and motion value used across the system.

  Brand-defined tokens (color primitives) are copied verbatim from
  the brand package: 05-Color/palette.css. Everything else (semantic
  color aliases, state colors, type scale, spacing, radius, shadow,
  breakpoints, z-index, motion) did not exist in the brand package
  and was defined here to build a usable system — see README.md.
*/

:root {
  /* ---------------------------------------------------------------
     COLOR — brand primitives (verbatim from brand package)
  --------------------------------------------------------------- */
  --ll-ink:       #101822; /* Primary. Blue-black, not pure #000. Body text, dark panels. */
  --ll-lake:      #3FA9DC; /* Accent. Large UI, backgrounds, icons, logo. NOT for text on white (2.65:1). */
  --ll-white:     #FFFFFF; /* Reversed logo, page background. */
  --ll-lake-deep: #1E7FB0; /* Links / small blue type on white (4.45:1, see a11y notes). */
  --ll-slate:     #5B6572; /* Secondary text on light backgrounds, captions, rules. */
  --ll-mist:      #8D97A5; /* Secondary text on DARK backgrounds only (fails on white). */
  --ll-rule:      #C9CED6; /* Hairlines, table borders, dividers. */
  --ll-wash:      #F4F6F8; /* Subtle panel fill behind cards and callouts. */

  /* ---------------------------------------------------------------
     COLOR — state colors (new: not part of the brand kit, chosen to
     harmonize with Ink/Lake and verified ≥4.5:1 on white)
  --------------------------------------------------------------- */
  --color-success:      #1E7B4D; /* 5.25:1 on white */
  --color-success-bg:   #E7F5EE;
  --color-warning:      #92600E; /* 5.38:1 on white */
  --color-warning-bg:   #FBF0DE;
  --color-error:        #B3241C; /* 6.59:1 on white */
  --color-error-bg:     #FBEAE8;
  --color-info:         var(--ll-lake-deep); /* 4.45:1 on white */
  --color-info-bg:      #E9F4FA;

  /* ---------------------------------------------------------------
     COLOR — semantic aliases (new: the mapping developers should
     actually reach for; brand primitives above stay as the palette
     reference)
  --------------------------------------------------------------- */
  --color-text:              var(--ll-ink);
  --color-text-secondary:    var(--ll-slate);
  --color-text-on-dark:      var(--ll-white);
  --color-text-secondary-on-dark: var(--ll-mist);
  --color-link:               var(--ll-lake-deep);
  --color-link-hover:         var(--ll-ink);
  --color-link-on-dark:       var(--ll-white);
  --color-border:             var(--ll-rule);
  --color-border-strong:      var(--ll-slate);
  --color-surface:            var(--ll-white);
  --color-surface-alt:        var(--ll-wash);
  --color-bg:                 var(--ll-white);
  --color-bg-dark:            var(--ll-ink);
  --color-accent:             var(--ll-lake);
  --color-focus-ring:         rgba(63, 169, 220, 0.5);

  /* ---------------------------------------------------------------
     TYPOGRAPHY (new: no type scale existed in the brand kit)
  --------------------------------------------------------------- */
  --font-heading: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs:   0.75rem;   /* 12px — fine print, legal disclaimers */
  --text-sm:   0.875rem;  /* 14px — captions, meta */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead paragraphs */
  --text-lg:   1.25rem;   /* 20px — small headings, subheads */
  --text-xl:   1.5rem;    /* 24px — H4 */
  --text-2xl:  1.875rem;  /* 30px — H3 */
  --text-3xl:  2.25rem;   /* 36px — H2 */
  --text-4xl:  3rem;      /* 48px — H1 */
  --text-5xl:  3.75rem;   /* 60px — display / hero */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

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

  /* ---------------------------------------------------------------
     SPACING — 4px base scale (new)
  --------------------------------------------------------------- */
  --space-1:  0.25rem; /* 4px */
  --space-2:  0.5rem;  /* 8px */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1rem;    /* 16px */
  --space-5:  1.5rem;  /* 24px */
  --space-6:  2rem;    /* 32px */
  --space-7:  2.5rem;  /* 40px */
  --space-8:  3rem;    /* 48px */
  --space-9:  4rem;    /* 64px */
  --space-10: 6rem;    /* 96px */

  /* ---------------------------------------------------------------
     RADIUS / SHADOW / MOTION (new)
  --------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 34, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 34, 0.10);
  --shadow-lg: 0 12px 32px rgba(16, 24, 34, 0.16);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------------------------------------------------------------
     Z-INDEX SCALE (new)
  --------------------------------------------------------------- */
  --z-dropdown:       1000;
  --z-sticky:         1100;
  --z-modal-backdrop: 1300;
  --z-modal:          1400;
  --z-tooltip:        1500;
  --z-toast:          1600;
}

/*
  BREAKPOINTS (reference only — CSS custom properties cannot be used
  inside @media query conditions). Use the literal values below, or
  the SCSS variables in tokens.scss if compiling with Sass.

  --bp-sm:  480px   phones landscape
  --bp-md:  768px   tablets
  --bp-lg:  1024px  small laptops
  --bp-xl:  1280px  desktops
  --bp-2xl: 1536px  large desktops
*/