/* ==========================================================================
   IGrow Wealth Investments — Design Tokens (v3.1)
   Production-ready, framework-agnostic CSS custom properties.
   Imports the legacy `colors_and_type.css` for backwards compatibility,
   then layers on: breakpoints, fluid type, semantic app colors,
   z-index scale, focus-ring variants, and motion preferences.

   Consume this file (NOT colors_and_type.css directly) when starting any
   new IGrow surface. The legacy tokens stay available — this file extends.
   ========================================================================== */

@import url("../colors_and_type.css");

:root {
  /* ==============================================================
     BREAKPOINTS — Tailwind-aligned (sm/md/lg/xl/2xl)
     Mobile-first. Use these via @media (min-width: var(--bp-md)) NOT
     by interpolation — CSS custom properties don't work inside media
     queries, so the tokens below are also exported as a SCSS map and
     a JS module in tailwind/tailwind.config.js.
     ============================================================== */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ==============================================================
     FLUID TYPE — clamp(min, preferred, max)
     For surfaces where the type should scale with viewport (heroes,
     marketing display copy). Body copy stays fixed at 16px for
     readability. Each scale is `clamp(<mobile>, <fluid>, <desktop>)`.
     ============================================================== */
  --fs-fluid-display: clamp(2.5rem, 1.5rem + 4vw,  4.5rem);  /* 40 → 72px */
  --fs-fluid-hero:    clamp(2rem,   1.25rem + 3vw, 3.5rem);  /* 32 → 56px */
  --fs-fluid-h1:      clamp(1.75rem, 1rem + 2.5vw, 2.5rem);  /* 28 → 40px */
  --fs-fluid-h2:      clamp(1.5rem,  1rem + 1.8vw, 2rem);    /* 24 → 32px */
  --fs-fluid-h3:      clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem); /* 20 → 28px */
  --fs-fluid-lead:    clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); /* 17 → 20px */

  /* ==============================================================
     SEMANTIC APP COLORS — for portal / dashboard / form states.
     Marketing surfaces still use the brand palette in
     colors_and_type.css; these tokens are for tenant/owner portal
     features (status pills, validation, banners, etc.).
     Tuned to live alongside the IGrow red without clashing.
     ============================================================== */
  --color-success-50:  #ECF7EE;
  --color-success-500: #2E7D32;   /* WCAG AA on white at 14px+ */
  --color-success-700: #1B5E20;

  --color-warning-50:  #FDF6E3;
  --color-warning-500: #B26A00;   /* amber-leaning so it doesn't read as IGrow red */
  --color-warning-700: #7A4700;

  --color-danger-50:   #FDECEE;
  --color-danger-500:  #C0392B;   /* deliberately ≠ brand-red; brand-red is for CTAs, not errors */
  --color-danger-700:  #8E2020;

  --color-info-50:     #E8F1F8;
  --color-info-500:    #1D5A8A;   /* sits between brand-teal and a true info blue */
  --color-info-700:    #103B5F;

  /* Semantic shorthand */
  --color-bg-success:  var(--color-success-50);
  --color-fg-success:  var(--color-success-700);
  --color-bg-warning:  var(--color-warning-50);
  --color-fg-warning:  var(--color-warning-700);
  --color-bg-danger:   var(--color-danger-50);
  --color-fg-danger:   var(--color-danger-700);
  --color-bg-info:     var(--color-info-50);
  --color-fg-info:     var(--color-info-700);

  /* ==============================================================
     BRAND TINTS — 50% tints of primary colours for use in
     infographics and charts ONLY (brand guide p.16).
     Do NOT use these for UI chrome, text, or backgrounds —
     the full-strength tokens in colors_and_type.css apply there.

     Calculation: tint = mix(brand-colour, #FFFFFF, 50%)
     ============================================================== */
  --color-raspberry-tint-50:   #DA9BA5;   /* #B6364B → 50% tint */
  --color-dusty-grey-tint-50:  #E8E8EA;   /* #D1D0D4 → 50% tint */
  --color-bright-grey-tint-50: #F6F6F8;   /* #ECEDF0 → 50% tint */
  --color-black-tint-50:       #808080;   /* #000000 → 50% tint */

  /* ==============================================================
     FOCUS RING — context-aware variants.
     The base ring (--color-accent-primary-ring) lives in
     colors_and_type.css. These cover non-brand-coloured surfaces.
     ============================================================== */
  --ring-width: 3px;
  --ring-offset: 0;
  --ring-default:  0 0 0 var(--ring-width) var(--color-accent-primary-ring);
  --ring-inverse:  0 0 0 var(--ring-width) rgba(255, 255, 255, 0.65);
  --ring-danger:   0 0 0 var(--ring-width) rgba(192, 57, 43, 0.4);

  /* ==============================================================
     Z-INDEX SCALE — predictable stacking.
     Always reach for these tokens; never use arbitrary z numbers.
     ============================================================== */
  --z-base:         0;
  --z-raised:       1;
  --z-dropdown:     1000;
  --z-sticky-nav:   1100;
  --z-overlay:      1200;
  --z-modal:        1300;
  --z-popover:      1400;
  --z-toast:        1500;
  --z-tooltip:      1600;

  /* ==============================================================
     CONTAINER QUERIES — names used across component CSS so a
     component can adapt regardless of where it's nested.
     ============================================================== */
  --cq-card:    card;
  --cq-section: section;

  /* ==============================================================
     OPACITY SCALE
     ============================================================== */
  --opacity-disabled: 0.45;
  --opacity-muted:    0.7;

  /* ==============================================================
     GUTTERS — canonical horizontal padding for page-level containers.
     Use these to keep edge-to-content spacing consistent across
     surfaces rather than picking ad-hoc space-* values.
     ============================================================== */
  --gutter-mobile:  var(--space-4);   /* 16px — base / Android mobile */
  --gutter-tablet:  var(--space-5);   /* 24px — md (768px+) */
  --gutter-desktop: var(--space-6);   /* 32px — lg (1024px+) */

  /* ==============================================================
     ASPECT RATIOS — used by Property cards, hero media, OG images.
     ============================================================== */
  --aspect-card:     3 / 2;   /* property thumbnail */
  --aspect-hero:     16 / 9;
  --aspect-banner:   21 / 9;
  --aspect-square:   1 / 1;
  --aspect-og:       1200 / 630;

  /* ==============================================================
     BORDERS — codified widths for inputs, dividers, focus.
     ============================================================== */
  --border-width-hairline: 1px;
  --border-width-default:  1.5px;
  --border-width-thick:    2px;
  --border-width-focus:    3px;
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION — honoured globally.
   Components should still rely on --duration-* tokens; this override caps
   any animation to a near-zero duration when the user has opted out.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}