/* =========================================================================
   Vivint VT Customer Apps Design System
   Colors + Typography Tokens
   Source: VT Customer Apps DS (Figma)
   ========================================================================= */

/* --------- Web fonts ----------------------------------------------------
   Vivint Circular is the brand display + body face (proprietary, shipped
   with this kit). Inter is loaded from Google Fonts for monospace-ish
   metadata rows in documentation surfaces only.
   Vivint Sans (a separate proprietary face used in some marketing
   contexts) is NOT shipped here — add @font-face entries if/when those
   files are provided.
   ------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: "Vivint Circular";
  src: url("/fonts/vivintCircular-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vivint Circular";
  src: url("/fonts/vivintCircular-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vivint Circular";
  src: url("/fonts/vivintCircular-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vivint Circular";
  src: url("/fonts/vivintCircular-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vivint Circular";
  src: url("/fonts/vivintCircular-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vivint Circular";
  src: url("/fonts/vivintCircular-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===================== PRIMITIVE COLORS =================== */
  /* Brand */
  --color-brand-amerigreen: #05E5AF;        /* Vivint Amerigreen — primary brand accent */
  --color-brand-amerigreen-soft: #80CFB9;   /* Soft Amerigreen — illustration / hover */
  --color-brand-purple: #9747FF;            /* Sticky-note / accent */
  --color-brand-yellow: #FFF101;            /* Highlight */
  --color-brand-red: #D01823;               /* Brand red */

  /* Neutral scale */
  --color-base-0:    #FFFFFF;
  --color-base-25:   #FBFAF9;   /* off-white surface */
  --color-base-50:   #F5F5F5;   /* page tint / hover */
  --color-base-100:  #F3F3F3;
  --color-base-150:  #DADADA;   /* divider, disabled bg */
  --color-base-200:  #D4D4D4;   /* divider strong */
  --color-base-300:  #A3A3A3;   /* placeholder text / muted icon */
  --color-base-500:  #707070;   /* secondary text */
  --color-base-600:  #595961;
  --color-base-800:  #282A3B;   /* text primary alt */
  --color-base-900:  #141C1C;   /* primary text */
  --color-base-1000: #000000;

  /* Status primitives */
  --color-success-500: #22C55E;
  --color-info-500:    #2684FF;
  --color-info-700:    #0068A3;
  --color-info-900:    #10298E;
  --color-warning-500: #FFF101;
  --color-error-500:   #D01823;
  --color-error-600:   #FF0000;

  /* Specialty */
  --color-slate-500: #788FB6;

  /* ===================== SEMANTIC TOKENS ===================== */
  /* Backgrounds */
  --bg-primary:      var(--color-base-0);
  --bg-secondary:    var(--color-base-25);
  --bg-tertiary:     var(--color-base-50);
  --bg-inverse:      var(--color-base-1000);
  --bg-disabled:     var(--color-base-100);
  --bg-hover:        var(--color-base-50);
  --bg-pressed:      var(--color-base-100);
  --bg-overlay:      rgba(0, 0, 0, 0.40);

  /* Status backgrounds */
  --bg-success-subtle: #ECFDF3;
  --bg-info-subtle:    #EFF8FF;
  --bg-warning-subtle: #FFFCEB;
  --bg-error-subtle:   #FEF3F2;

  /* Foregrounds (text + icon) */
  --fg-primary:      var(--color-base-900);   /* default text */
  --fg-secondary:    var(--color-base-500);   /* secondary text */
  --fg-tertiary:     var(--color-base-300);   /* placeholder, disabled */
  --fg-on-inverse:   var(--color-base-0);
  --fg-on-brand:     var(--color-base-1000);  /* Amerigreen is light, use black text */
  --fg-link:         var(--color-info-700);
  --fg-link-hover:   var(--color-info-900);
  --fg-success:      #027A48;
  --fg-warning:      #B54708;
  --fg-error:        var(--color-error-500);

  /* Borders */
  --border-subtle:   #EAECF0;
  --border-default:  var(--color-base-200);
  --border-strong:   var(--color-base-500);
  --border-inverse:  var(--color-base-1000);
  --border-focus:    var(--color-brand-purple);

  /* Action / button */
  --action-primary-bg:        var(--color-base-1000);
  --action-primary-bg-hover:  var(--color-base-800);
  --action-primary-fg:        var(--color-base-0);
  --action-secondary-bg:      var(--color-base-50);
  --action-secondary-bg-hover:var(--color-base-150);
  --action-secondary-fg:      var(--color-base-1000);
  --action-tertiary-bg:       transparent;
  --action-tertiary-fg:       var(--color-base-1000);
  --action-accent-bg:         var(--color-brand-amerigreen);
  --action-accent-fg:         var(--color-base-1000);

  /* ===================== TYPOGRAPHY ===================== */
  --font-display: "Vivint Circular", "Vivint Sans", system-ui, sans-serif;
  --font-body:    "Vivint Circular", "Vivint Sans", system-ui, sans-serif;
  --font-mono:    "Inter", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Display / headline scale (desktop) */
  --fs-h1: 58px;  --lh-h1: 72.5px;
  --fs-h2: 48px;  --lh-h2: 60px;
  --fs-h3: 42px;  --lh-h3: 52.5px;
  --fs-h4: 34px;  --lh-h4: 42.5px;
  --fs-h5: 28px;  --lh-h5: 35px;
  --fs-h6: 24px;  --lh-h6: 30px;

  /* Display / headline scale (mobile overrides) */
  --fs-h1-m: 40px; --lh-h1-m: 50px;
  --fs-h2-m: 34px; --lh-h2-m: 42.5px;
  --fs-h3-m: 28px; --lh-h3-m: 35px;
  --fs-h4-m: 24px; --lh-h4-m: 30px;
  --fs-h5-m: 20px; --lh-h5-m: 25px;
  --fs-h6-m: 18px; --lh-h6-m: 22.5px;

  /* Body scale */
  --fs-eyebrow: 12px;  --lh-eyebrow: 18px;  --ls-eyebrow: 0.20em;
  --fs-body-lg: 18px;  --lh-body-lg: 27px;
  --fs-body:    16px;  --lh-body:    24px;
  --fs-body-sm: 14px;  --lh-body-sm: 21px;
  --fs-body-xs: 12px;  --lh-body-xs: 18px;
  --ls-body: -0.02em;  /* -2% tracking on all body */

  /* ===================== SPACING ===================== */
  --space-xx-sm:  4px;
  --space-x-sm:   8px;
  --space-sm:     12px;
  --space-md:     16px;
  --space-big:    20px;
  --space-x-big:  24px;
  --space-xx-big: 28px;
  --space-xxx-big:32px;
  --space-lg:     40px;
  --space-x-lg:   48px;
  --space-xx-lg:  64px;
  --space-xxx-lg: 80px;
  --space-huge:   96px;
  --space-x-huge: 128px;
  --space-xx-huge:160px;

  /* ===================== RADIUS ===================== */
  --radius-none:  0px;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    5px;   /* button default */
  --radius-lg:    8px;   /* card / surface */
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-full:  999px; /* marketing pill button */

  /* ===================== SHADOWS / ELEVATION ===================== */
  /* Approximated from Figma — six elevation steps. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-2xl:0 24px 48px -12px rgba(16, 24, 40, 0.18);

  /* Focus ring — purple, used for keyboard-focused interactive elements */
  --focus-ring: 0 0 0 2px var(--color-base-0), 0 0 0 4px var(--color-brand-purple);
}

/* ===================== ELEMENT DEFAULTS ===================== */
html, body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .h4 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5, .h5 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6, .h6 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h6); line-height: var(--lh-h6); }

@media (max-width: 768px) {
  h1, .h1 { font-size: var(--fs-h1-m); line-height: var(--lh-h1-m); }
  h2, .h2 { font-size: var(--fs-h2-m); line-height: var(--lh-h2-m); }
  h3, .h3 { font-size: var(--fs-h3-m); line-height: var(--lh-h3-m); }
  h4, .h4 { font-size: var(--fs-h4-m); line-height: var(--lh-h4-m); }
  h5, .h5 { font-size: var(--fs-h5-m); line-height: var(--lh-h5-m); }
  h6, .h6 { font-size: var(--fs-h6-m); line-height: var(--lh-h6-m); }
}

p { margin: 0 0 var(--space-md); color: var(--fg-primary); }
small { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.eyebrow { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--fw-medium); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.body-xs { font-size: var(--fs-body-xs); line-height: var(--lh-body-xs); }

a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--fg-link-hover); }