/*
  Corporearte — Colors & Type
  ----------------------------------
  Source: Identidad | 2025 brand book.
  Brand fonts: AmsiPro-Black (display, ALL CAPS) — substituted with
  Archivo Black on the web (closest free Google Fonts match in proportion
  and weight). When delivering print, use the actual AmsiPro-Black licensed file.
  Body type uses Inter as a clean neutral grotesque companion.
*/

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

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary — PANTONE Bright Orange C */
  --c-orange:        #FF5F00;
  --c-orange-600:    #E55400;   /* hover / pressed */
  --c-orange-300:    #FF8A3D;   /* tint, hover-on-dark */
  --c-orange-100:    #FFE6D2;   /* surface tint */

  /* Secondary — PANTONE P 179-11 C */
  --c-gray:          #686867;
  --c-gray-900:      #29292A;   /* signage near-black, used on storefront */
  --c-gray-700:      #3F3F40;
  --c-gray-500:      #686867;
  --c-gray-300:      #B7B7B6;
  --c-gray-200:      #D8D8D6;
  --c-gray-100:      #ECECEA;
  --c-gray-050:      #F6F6F4;
  --c-white:         #FFFFFF;
  --c-black:         #111111;

  /* Semantic foreground / background */
  --fg-1:            var(--c-gray-900);    /* headlines, hi-contrast */
  --fg-2:            var(--c-gray-500);    /* body */
  --fg-3:            var(--c-gray-300);    /* muted */
  --fg-on-orange:    var(--c-white);
  --fg-on-dark:      var(--c-white);

  --bg-app:          var(--c-white);
  --bg-elev:         var(--c-gray-050);
  --bg-card:         var(--c-white);
  --bg-brand:        var(--c-orange);
  --bg-dark:         var(--c-gray-900);
  --bg-tint:         var(--c-orange-100);

  --border:          var(--c-gray-200);
  --border-strong:   var(--c-gray-300);
  --border-brand:    var(--c-orange);

  /* Status (derived, harmonised with the orange) */
  --c-success:       #1F8A5B;
  --c-warning:       #E0A100;
  --c-danger:        #C8341A;
  --c-info:          #1E6FB0;

  /* ---------- TYPE ---------- */
  --font-display:   'AmsiPro-Black', 'Archivo Black', system-ui, -apple-system, sans-serif;
  --font-body:      'MyriadPro', 'Rubik', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Scale — modular, tuned for an industrial/printer brand:
     short, punchy display headlines + comfortable body sizes */
  --fs-display-xl:  88px;
  --fs-display-lg:  64px;
  --fs-display-md:  48px;
  --fs-h1:          40px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-overline:    11px;

  --lh-tight:       1.02;
  --lh-snug:        1.18;
  --lh-normal:      1.5;
  --lh-loose:       1.7;

  --ls-display:     0.01em;     /* AmsiPro-Black sits flush; very small positive tracking */
  --ls-overline:    0.16em;     /* uppercase labels are tracked out generously */

  /* ---------- SPACING ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;            /* matches signage app-icon containers */
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(17,17,17,.06), 0 1px 1px rgba(17,17,17,.04);
  --shadow-2: 0 4px 12px rgba(17,17,17,.08), 0 2px 4px rgba(17,17,17,.04);
  --shadow-3: 0 12px 32px rgba(17,17,17,.12), 0 4px 8px rgba(17,17,17,.06);
  --shadow-brand: 0 14px 40px rgba(255,95,0,.28);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(.2, .7, .2, 1);
  --ease-in-out:  cubic-bezier(.6, 0, .2, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;
}

/* ---------- SEMANTIC TYPE ---------- */
html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-app); }
body { font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

.display-xl, .display-lg, .display-md, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); }
.lede { font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--fg-1); }

.overline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--fg-2);
}

.caption { font-size: var(--fs-caption); color: var(--fg-2); }

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

/* Brand "+" accent — used in GRÁFICA+IDEAS lockup. Always orange. */
.plus-accent { color: var(--c-orange); }