/* ============================================================
   SYNC RACE STUDIOS — shared stylesheet
   Pulled from srcs.online. This file is the source of truth for
   brand tokens (colors, type, shadows) — admin.css builds on top
   of these variables rather than redefining its own palette.
   ============================================================ */

:root{
  --paper:    #FAF7F3;   /* the wall */
  --surface:  #FFFFFF;   /* anything that floats */
  --sunk:     #F2EDE6;   /* insets, code wells */
  --ink:      #241C17;   /* headings, body */
  --dust:     #7A6C63;   /* secondary text */
  --hair:     #EAE2D9;   /* 1px rules */

  --lamp:     #FF6F4E;   /* brand coral — fills and graphics only */
  --lamp-ink: #C4451F;   /* darkened coral — safe for text on white */
  --lamp-soft:#FFF1EC;   /* coral at a whisper */
  --blue:     #1D6AAE;   /* brand blue */
  --blue-soft:#EDF4FA;

  --lift-1: 0 1px 2px rgba(70,45,30,.05), 0 3px 10px rgba(70,45,30,.05);
  --lift-2: 0 2px 5px rgba(70,45,30,.06), 0 10px 28px rgba(70,45,30,.08);
  --lift-3: 0 6px 14px rgba(70,45,30,.07), 0 24px 56px rgba(70,45,30,.11);
  --lift-4: 0 10px 24px rgba(70,45,30,.08), 0 44px 90px rgba(70,45,30,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --gut:  clamp(1.25rem,4vw,3rem);
  --max:  1440px;
}

:root.dark{
  --paper:    #191310;
  --surface:  #221A16;
  --sunk:     #2C221B;
  --ink:      #F6EEE7;
  --dust:     #A9998E;
  --hair:     #34281F;

  --lamp:     #FF7E5E;
  --lamp-ink: #FF9878;
  --lamp-soft:#2E1E18;
  --blue:     #6FB0E8;
  --blue-soft:#1B2632;

  --lift-1: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.22);
  --lift-2: 0 2px 6px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.3);
  --lift-3: 0 6px 16px rgba(0,0,0,.32), 0 26px 60px rgba(0,0,0,.36);
  --lift-4: 0 10px 26px rgba(0,0,0,.34), 0 46px 92px rgba(0,0,0,.44);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--lamp-ink); outline-offset:3px; border-radius:3px; }

h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:400; letter-spacing:-.015em; margin:0; line-height:1.1; }
.warm{ color:var(--lamp-ink); }
.kicker{ display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--lamp-ink); margin-bottom:1rem; }
.muted{ color:var(--dust); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-lamp{ background:var(--lamp); color:#2A1006; box-shadow:0 5px 20px rgba(255,111,78,.32); }
.btn-lamp:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,111,78,.42); }
.btn-quiet{ background:var(--surface); color:var(--ink); border-color:var(--hair); box-shadow:var(--lift-1); }
.btn-quiet:hover{ transform:translateY(-2px); box-shadow:var(--lift-2); }

.field{ display:grid; gap:.45rem; }
.field label{ font-weight:600; font-size:.92rem; }
.field input,
.field select,
.field textarea{
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--hair); border-radius:12px;
  padding:.8rem 1rem; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:hover{ border-color:var(--dust); }
.field input:focus{
  outline:none; border-color:var(--lamp);
  box-shadow:0 0 0 4px var(--lamp-soft);
}