/* Rinse n Repeat — flattened global stylesheet (Vercel build).
   Generated from tokens/. Edit tokens/ in the design system, then re-flatten. */

/* ===== fonts.css ===== */
/* Webfonts — loaded from Google Fonts CDN.
   NOTE: The Rinse n Repeat logo uses a heavy italic geometric sans we do not
   have the source file for. Montserrat (800/900 italic) is the closest match
   and is used as the display face. Flag to client for exact logo font. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&display=swap');

/* ===== colors.css ===== */
:root{
  /* ===== Base palette ===== */
  /* Brand black — the signature Rinse n Repeat backdrop */
  --black-950:#0B0B0C;
  --black-900:#141416;
  --black-800:#1C1C1F;
  --charcoal-700:#232326;   /* dark feature cards */
  --charcoal-600:#2E2E32;
  --charcoal-500:#3A3A3F;

  /* Neutrals */
  --gray-900:#1B1B1D;
  --gray-800:#33333A;
  --gray-700:#4B4B52;
  --gray-600:#6B6B72;
  --gray-500:#8C8C93;
  --gray-400:#AEAEB4;
  --gray-300:#CFCFD3;
  --gray-200:#E4E3E1;
  --gray-100:#EFEEEC;
  --gray-50:#F6F5F3;
  --white:#FFFFFF;
  --paper:#F2F1EF;          /* light section background */
  --paper-soft:#FBFAF8;

  /* Blast Orange — primary accent */
  --orange-700:#B8460B;     /* active/press */
  --orange-600:#DA5610;     /* hover */
  --orange-500:#F26A21;     /* primary */
  --orange-400:#F78B4C;
  --orange-300:#FBA974;
  --orange-200:#FBC79E;
  --orange-100:#FBDFC7;     /* peach highlight (heading marker) */
  --orange-050:#FDF0E6;

  /* Support / semantic hues */
  --star-gold:#FFB020;      /* review stars */
  --success-500:#2E9E5B;
  --success-050:#E7F4EC;
  --warning-500:#E8A317;
  --danger-500:#D9412B;
  --danger-050:#FBE9E6;
  --info-500:#2F7DD1;

  /* ===== Semantic aliases ===== */
  /* Surfaces */
  --surface-page:var(--black-950);
  --surface-page-light:var(--paper);
  --surface-card:var(--charcoal-700);
  --surface-card-light:var(--white);
  --surface-raised:var(--charcoal-600);
  --surface-inverse:var(--white);

  /* Text */
  --text-strong:var(--white);
  --text-body:rgba(255,255,255,.82);
  --text-muted:rgba(255,255,255,.60);
  --text-on-light:var(--black-900);
  --text-on-light-muted:var(--gray-600);
  --text-accent:var(--orange-500);
  --text-inverse:var(--black-950);

  /* Brand */
  --brand-primary:var(--orange-500);
  --brand-primary-hover:var(--orange-600);
  --brand-primary-active:var(--orange-700);
  --brand-ink:var(--black-950);

  /* Lines & borders */
  --border-on-dark:rgba(255,255,255,.14);
  --border-on-dark-strong:rgba(255,255,255,.28);
  --border-on-light:var(--gray-200);
  --border-accent:var(--orange-500);
  --focus-ring:rgba(242,106,33,.45);
}

/* ===== typography.css ===== */
:root{
  /* ===== Font families ===== */
  --font-display:'Montserrat','Segoe UI',system-ui,sans-serif;   /* headings, logo lockup */
  --font-body:'Poppins','Segoe UI',system-ui,sans-serif;          /* body, UI */
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* ===== Weights ===== */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-extrabold:800; /* @kind other */
  --fw-black:900; /* @kind other */

  /* ===== Type scale (fluid — px at desktop, scales down on small screens) ===== */
  --fs-display:clamp(38px,7vw,64px);   /* hero */
  --fs-h1:clamp(32px,6vw,48px);
  --fs-h2:clamp(27px,4.5vw,36px);
  --fs-h3:clamp(22px,3.5vw,26px);
  --fs-h4:20px;
  --fs-lead:clamp(17px,2.5vw,19px);      /* intro paragraph */
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12px;
  --fs-eyebrow:13px;   /* pill labels — uppercase, tracked */

  /* ===== Line heights ===== */
  --lh-tight:1.04; /* @kind other */
  --lh-heading:1.14; /* @kind other */
  --lh-snug:1.35; /* @kind other */
  --lh-body:1.6; /* @kind other */

  /* ===== Letter spacing ===== */
  --ls-display:-0.02em; /* @kind other */
  --ls-heading:-0.01em; /* @kind other */
  --ls-body:0; /* @kind other */
  --ls-eyebrow:0.14em; /* @kind other */
}

/* ===== spacing.css ===== */
:root{
  /* 4px base spacing scale */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Layout */
  --container-max:1200px;
  --gutter:24px;
  --section-y:clamp(56px,10vw,96px);      /* vertical rhythm between page sections */
  --section-pad:clamp(48px,8vw,84px);     /* section vertical padding */
  --gutter-x:clamp(18px,4.5vw,28px);      /* horizontal page gutter */
}

/* ===== radius.css ===== */
:root{
  /* Corner radii */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;      /* project & content cards */
  --radius-xl:28px;      /* large feature cards */
  --radius-2xl:36px;
  --radius-pill:999px;   /* buttons, badges, labels */
  --radius-circle:50%;
}

/* ===== shadows.css ===== */
:root{
  /* Elevation — soft, low-contrast. Light-surface cards float gently;
     the black page itself carries no shadow. */
  --shadow-xs:0 1px 2px rgba(11,11,12,.06);
  --shadow-sm:0 2px 8px rgba(11,11,12,.08);
  --shadow-md:0 10px 24px rgba(11,11,12,.10);
  --shadow-lg:0 20px 44px rgba(11,11,12,.14);
  --shadow-hover:0 16px 36px rgba(11,11,12,.18);

  /* Warm glow — orange emphasis under primary buttons/CTAs */
  --shadow-orange:0 12px 28px rgba(242,106,33,.34);

  /* Media protection gradient — sits over hero/project photos so
     white text stays legible (left-weighted, like the hero). */
  --scrim-hero:linear-gradient(90deg,rgba(11,11,12,.78) 0%,rgba(11,11,12,.45) 42%,rgba(11,11,12,.05) 78%); /* @kind other */
  --scrim-card:linear-gradient(180deg,rgba(11,11,12,0) 40%,rgba(11,11,12,.72) 100%); /* @kind other */
}

/* ===== motion.css ===== */
:root{
  /* Durations */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */

  /* Easing — confident ease-out; no bounces */
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,.05,.36,1); /* @kind other */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */

  /* Common transitions */
  --t-colors:color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out); /* @kind other */
  --t-transform:transform var(--dur-base) var(--ease-out); /* @kind other */
  --t-all:all var(--dur-base) var(--ease-out); /* @kind other */

  /* Interaction deltas — hover lift / press settle */
  --lift-hover:translateY(-2px); /* @kind other */
  --press-scale:scale(.98); /* @kind other */
}