/* Signicat brand foundation — typography, tokens, base reset.
   Source: signicat.com live stylesheet + brandpad.io/signicat.
   Loaded by every page in the Marketing Ops Portal. */

/* Paths are relative to this CSS file (which lives at /assets/),
   so the same URL works whether the page is loaded via http or file://. */
@font-face {
  font-family: 'mabry';
  src: url('fonts/mabry-regular-pro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'mabry';
  src: url('fonts/mabry-medium-pro.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'mabry';
  src: url('fonts/mabry-bold-pro.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (verified hex codes from brandpad.io/signicat) */
  --sg-purple:        #2A0062;  /* Trustworthy Purple — primary */
  --sg-purple-dark:   #180044;  /* Dark variant used in gradients */
  --sg-purple-mid:    #644092;  /* Mid purple */
  --sg-purple-soft:   #F2F0F6;  /* Trustworthy Purple Light */
  --sg-mint:          #41FFD1;  /* Energetic Mint — accent */
  --sg-mint-dark:     #1BE1B2;
  --sg-indigo:        #5F36BC;  /* Confident Indigo — interactive */
  --sg-graphite:      #2B253A;  /* Reliable Graphite */
  --sg-grey:          #EAEAEA;  /* Smart Grey */
  --sg-grey-warm:     #918D86;  /* Used in graphite tints on signicat.com */
  --sg-sand:          #DFDBD6;  /* Warm neutral */
  --sg-white:         #FFFFFF;
  --sg-coral:         #FF8F8F;  /* Error / warning accent */
  --sg-coral-bg:      #FFE3E3;
  --sg-text-muted:    #6E6478;  /* Existing portal grey, kept for continuity */

  /* Font stacks — exact match to signicat.com */
  --sg-font-brand: 'mabry', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                   Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif,
                   BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sg-font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                   "Liberation Mono", "Courier New", monospace;

  /* Type scale — exact rem values from signicat.com */
  --sg-text-sm:    1.125rem;     /* 18px @ 83% root */
  --sg-text-base:  1.3125rem;    /* 21px — Signicat body */
  --sg-text-md:    1.6875rem;    /* 27px — subhead */
  --sg-text-lg:    2.8125rem;    /* 45px — H2 */
  --sg-text-xl:    3.9375rem;    /* 63px — H1 base */
  --sg-text-xxl:   clamp(3.9375rem, 5.3vw, 5.625rem); /* H1 fluid */
  --sg-text-h2:    clamp(2.8125rem, 4vw, 3.9375rem);

  /* Spacing & radii */
  --sg-radius-input:  0.5rem;
  --sg-radius-card:   1rem;
  --sg-radius-pill:   9999px;
  --sg-shadow-card:   0 1.5rem 5rem rgba(42, 0, 98, 0.14);
  --sg-shadow-soft:   0 0.5rem 1.5rem rgba(42, 0, 98, 0.08);
  --sg-transition:    160ms ease;

  /* Layout */
  --sg-max:           96.5rem;
  --sg-gutter:        clamp(1.5rem, 5vw, 4rem);
}

/* Base typography — applies on top of any existing body styles via the
   font-family declaration. Each page also sets its own colors/layout. */
html {
  -webkit-text-size-adjust: 100%;
}

body,
html body {
  font-family: var(--sg-font-brand);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Mabry has a slightly tighter natural rhythm — keep portal's 83% root size,
   which matches signicat.com's body of 13.28px exactly. */

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Brand focus ring (replaces hard pink outline where pages use it via class) */
.sg-focus:focus-visible,
.sg-btn:focus-visible,
.sg-input:focus-visible,
.sg-select:focus-visible,
.sg-textarea:focus-visible {
  outline: 3px solid var(--sg-indigo);
  outline-offset: 3px;
}

/* Respect user motion preferences across every portal page that imports this
   shared foundation. The short duration keeps state changes synchronous enough
   for the existing inline app code without forcing decorative motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}