/* Repmation design system — derived from docs/brand-guide.md v1.0
   Font definitions live in /fonts/fonts.css only. */

:root{
  --rm-blaze:#F54703;
  --rm-ember:#B8300A;
  --rm-forge:#D93B02;
  --rm-ink:#171513;
  --rm-white:#FFFFFF;
  --rm-paper:#F7F4F1;
  --rm-header-line:#3A342E;

  --rm-surface:#FFFFFF;
  --rm-surface-soft:#FCFAF8;
  --rm-surface-warm:#F1EAE4;
  --rm-line:#DED5CE;
  --rm-line-strong:#C9BDB4;
  --rm-muted:#6E655F;
  --rm-muted-light:#8A817A;
  --rm-success:#176B45;
  --rm-warning:#9A4B0F;
  --rm-danger:#A62E12;
  --rm-info:#325D7A;

  --rm-font-sans:'Archivo',Arial,sans-serif;
  --rm-font-condensed:'Barlow Condensed','Arial Narrow',sans-serif;
  --rm-font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Type roles. Fixed values are the brand guide spec; clamp() scales the two
     largest roles down on narrow viewports without exceeding the spec size. */
  --rm-display-size:clamp(2.125rem,1.35rem + 3.1vw,3.375rem);
  --rm-display-line:1.04;
  --rm-display-track:-.035em;
  --rm-headline-size:clamp(1.625rem,1.29rem + 1.35vw,2.125rem);
  --rm-headline-line:1.12;
  --rm-headline-track:-.03em;
  --rm-body-size:.9375rem;
  --rm-body-line:1.533;
  --rm-signage-size:.8125rem;
  --rm-signage-track:.20em;
  --rm-label-size:.625rem;
  --rm-label-track:.16em;

  --rm-mark:28px;
  --rm-lockup-gap:14px;
  --rm-wordmark-size:27px;
  --rm-wordmark-track:-.035em;

  --rm-radius-xs:6px;
  --rm-radius-sm:10px;
  --rm-radius-md:16px;
  --rm-radius-lg:24px;
  --rm-shadow-sm:0 1px 2px rgba(23,21,19,.06),0 5px 14px rgba(23,21,19,.04);
  --rm-shadow-md:0 18px 48px rgba(73,43,27,.10);
  --rm-shadow-lg:0 32px 80px rgba(73,43,27,.16);
  --rm-space-1:.25rem;
  --rm-space-2:.5rem;
  --rm-space-3:.75rem;
  --rm-space-4:1rem;
  --rm-space-5:1.25rem;
  --rm-space-6:1.5rem;
  --rm-space-8:2rem;
  --rm-space-10:2.5rem;
  --rm-space-12:3rem;
  --rm-space-16:4rem;
  --rm-page:1180px;
  --rm-transition:160ms cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--rm-font-sans);background:var(--rm-paper);color:var(--rm-ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{font-family:var(--rm-font-sans);font-size:var(--rm-body-size);line-height:var(--rm-body-line);font-weight:400;accent-color:var(--rm-blaze)}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
a,button,input,select,textarea,summary,[tabindex]:not([tabindex='-1']){scroll-margin-top:7rem}
:focus-visible{outline:3px solid color-mix(in srgb,var(--rm-blaze) 38%,transparent);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--rm-blaze) 24%,white);color:var(--rm-ink)}
.sr-only,.rm-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
[hidden]{display:none!important}

/* Type roles. Sentence case for headlines; caps for signage and labels only. */
h1,.rm-display{font-family:var(--rm-font-sans);font-size:var(--rm-display-size);font-weight:800;line-height:var(--rm-display-line);letter-spacing:var(--rm-display-track);text-transform:none}
h2,h3,.rm-headline{font-family:var(--rm-font-sans);font-size:var(--rm-headline-size);font-weight:800;line-height:var(--rm-headline-line);letter-spacing:var(--rm-headline-track);text-transform:none}
h3{font-size:1.375rem}
.rm-eyebrow,.eyebrow,.rm-signage{font-family:var(--rm-font-condensed)!important;font-size:var(--rm-signage-size)!important;font-weight:600!important;letter-spacing:var(--rm-signage-track)!important;line-height:1!important;text-transform:uppercase!important;color:var(--rm-ember)!important}
.rm-label,.rm-mono,.url,.job-card-url,.summary-label,.period-label{font-family:var(--rm-font-mono)!important}
.rm-label{font-size:var(--rm-label-size);font-weight:500;letter-spacing:var(--rm-label-track);text-transform:uppercase}
.rm-metric,.metric-value,.stat-value{font-family:var(--rm-font-sans)!important;font-weight:800;font-variant-numeric:tabular-nums}

/* Links: Forge, hover Ember. Never orange on body copy. */
a{color:var(--rm-forge);text-underline-offset:.18em}
a:hover{color:var(--rm-ember)}
p a{text-decoration:underline}

.rm-page-width{width:min(var(--rm-page),calc(100% - 40px));margin-inline:auto}
.rm-stack{display:grid;gap:var(--rm-space-4)}
.rm-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--rm-space-3)}
.rm-grid{display:grid;gap:var(--rm-space-5)}
.rm-card{background:var(--rm-surface);border:1px solid var(--rm-line);border-radius:var(--rm-radius-md);box-shadow:var(--rm-shadow-sm)}

.rm-button,.button,.btn,.action-button,button[type='submit']{
  display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:.55rem;
  border:1px solid var(--rm-blaze);border-radius:var(--rm-radius-sm);background:var(--rm-blaze);color:var(--rm-white);
  padding:.8rem 1.15rem;font-family:var(--rm-font-sans);font-size:.88rem;font-weight:800;line-height:1.1;
  text-decoration:none;cursor:pointer;transition:transform var(--rm-transition),background var(--rm-transition),border-color var(--rm-transition),box-shadow var(--rm-transition)
}
.rm-button:hover,.button:hover,.btn:hover,.action-button:hover,button[type='submit']:hover{background:var(--rm-forge);border-color:var(--rm-forge);color:var(--rm-white);transform:translateY(-1px);box-shadow:0 10px 24px rgba(217,59,2,.18)}
.rm-button:active,.button:active,.btn:active,.action-button:active,button[type='submit']:active{background:var(--rm-ember);border-color:var(--rm-ember);transform:none;box-shadow:none}
.rm-button-secondary,.button-secondary,.btn.secondary,.action-button:not(.primary){background:transparent;color:var(--rm-ink);border-color:var(--rm-line-strong)}
.rm-button-secondary:hover,.button-secondary:hover,.btn.secondary:hover,.action-button:not(.primary):hover{background:var(--rm-surface-warm);border-color:var(--rm-ink);color:var(--rm-ink);box-shadow:none}
.rm-button-dark{background:var(--rm-ink);border-color:var(--rm-ink);color:var(--rm-paper)}
.rm-button-dark:hover{background:#000;border-color:#000}

input:not([type='checkbox']):not([type='radio']):not([type='color']),select,textarea{
  width:100%;min-height:50px;border:1px solid var(--rm-line-strong);border-radius:var(--rm-radius-sm);background:var(--rm-white);color:var(--rm-ink);padding:.8rem .9rem;box-shadow:0 1px 0 rgba(23,21,19,.03);transition:border-color var(--rm-transition),box-shadow var(--rm-transition),background var(--rm-transition)
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
input:hover,select:hover,textarea:hover{border-color:#A99B91}
input:focus,select:focus,textarea:focus{border-color:var(--rm-blaze);outline:none;box-shadow:0 0 0 4px rgba(245,71,3,.13)}
label{font-family:var(--rm-font-condensed);font-size:var(--rm-signage-size);font-weight:600;letter-spacing:var(--rm-signage-track);text-transform:uppercase}
small,.muted{color:var(--rm-muted)}

.notice,.rm-notice{border:1px solid var(--rm-line);border-left:4px solid var(--rm-info);border-radius:0;background:var(--rm-surface);padding:.85rem 1rem;color:var(--rm-ink);box-shadow:var(--rm-shadow-sm)}
.notice.success,.rm-notice-success{border-left-color:var(--rm-success);background:#F2FAF6;color:#154D36}
.notice.error,.rm-notice-danger{border-left-color:var(--rm-danger);background:#FFF4F0;color:#7D2714}
.notice.warning,.rm-notice-warning{border-left-color:var(--rm-warning);background:#FFF8EE;color:#6C3A10}

.table-wrap{width:100%;overflow:auto;border-radius:var(--rm-radius-sm);overscroll-behavior-inline:contain}
table{border-collapse:separate;border-spacing:0;width:100%}
th{font-family:var(--rm-font-mono)!important;font-size:var(--rm-label-size)!important;font-weight:500!important;letter-spacing:var(--rm-label-track)!important;text-transform:uppercase!important;color:var(--rm-muted)!important;background:var(--rm-surface-soft)}
th,td{padding:.9rem 1rem;border-bottom:1px solid var(--rm-line);text-align:left;vertical-align:top}
td{font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FFF9F5}

/* Canonical header lockup. Brand guide: 28px mark, 14px gap, 27px wordmark.
   These values are the single source; repmation-shared-brand.css must not
   restate them. Bar treatment stays in the shared brand stylesheet. */
.repmation-shared-header,.site-nav,.rm-nav,.nav,.topbar{font-family:var(--rm-font-sans)}
.repmation-shared-header a,.site-nav a,.rm-nav a,.nav a,.topbar a{text-decoration:none}
.repmation-shared-brand{display:inline-flex;align-items:center;gap:var(--rm-lockup-gap);min-width:0;color:inherit}
.repmation-shared-brand .brand-mark{display:block;width:var(--rm-mark);height:var(--rm-mark);flex:none;overflow:visible}
.repmation-shared-brand .brand-frame{fill:var(--rm-blaze)}
.repmation-shared-brand .brand-star{fill:var(--rm-white)}
.repmation-shared-brand .brand-type{display:block;min-width:0;line-height:1}
.repmation-shared-brand .brand-wordmark{font-family:var(--rm-font-sans);font-size:var(--rm-wordmark-size);font-weight:800;line-height:1;letter-spacing:var(--rm-wordmark-track);white-space:nowrap}

/* Footers use the sans face for prose. Mono is reserved for data, labels,
   identifiers, URLs, and timestamps — apply .rm-label or .rm-mono to those. */
.rm-footer,.site-footer,.footer{font-family:var(--rm-font-sans)}

[data-rm-experience-toggle]{display:inline-flex;align-items:center;gap:.45rem;min-height:38px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:inherit;padding:.45rem .7rem;font-family:var(--rm-font-mono);font-size:var(--rm-label-size);font-weight:500;line-height:1;letter-spacing:var(--rm-label-track);text-transform:uppercase;cursor:pointer}
[data-rm-experience-toggle]::before{content:'';width:.55rem;height:.55rem;border-radius:50%;background:currentColor;opacity:.55}
html[data-rm-experience='on'] [data-rm-experience-toggle]::before{background:var(--rm-white);opacity:1;box-shadow:0 0 0 4px rgba(255,255,255,.15)}

body[data-repmation-surface='owner'],body[data-repmation-surface='tech'],body[data-repmation-surface='admin'],body[data-repmation-surface='signup']{background:var(--rm-paper);color:var(--rm-ink)}
body[data-repmation-surface='owner'] p,body[data-repmation-surface='tech'] p,body[data-repmation-surface='admin'] p,body[data-repmation-surface='signup'] p{color:var(--rm-muted)}

body[data-repmation-surface='customer']{background:var(--rm-paper);color:var(--rm-ink)}
body[data-repmation-surface='customer'] .stripe{background:var(--accent,var(--rm-blaze))}
body[data-repmation-surface='customer'] .col{width:min(100%,500px);padding:clamp(1.25rem,4vw,2.25rem)}
body[data-repmation-surface='customer'] .choice,body[data-repmation-surface='customer'] .action-choice{border-radius:var(--rm-radius-md);box-shadow:var(--rm-shadow-sm)}
body[data-repmation-surface='customer'] .policy-note{border-radius:var(--rm-radius-sm)}

body[data-repmation-surface='marketing']{background:var(--rm-paper);color:var(--rm-ink)}

html[data-rm-experience='off'] *,html[data-rm-experience='off'] *::before,html[data-rm-experience='off'] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media(max-width:760px){
  :root{--rm-radius-lg:18px;--rm-radius-md:14px;--rm-wordmark-size:24px}
  .rm-page-width{width:min(100% - 24px,var(--rm-page))}
  .rm-button,.button,.btn,.action-button,button[type='submit']{min-height:48px}
  [data-rm-experience-toggle]{display:none}
}
@media(max-width:520px){
  :root{--rm-wordmark-size:21px;--rm-lockup-gap:10px}
}
