/* ==========================================================================
   Trusted Tradie Network — brand theme
   --------------------------------------------------------------------------
   Maps this static build onto the design system already shipping in the
   Laravel application:

     ttn/resources/views/tradie/v2/application.blade.php
     ttn/public/tradie/v2/assets/redesign.css   (:root tokens, .card, .btn-*)

   Nothing here introduces new components. It re-points the design tokens the
   compiled Tailwind in app.css already consumes (--font-*, --background,
   --foreground, --primary, --border, --ring, --radius) at the brand values,
   and re-declares the utilities whose colours Tailwind baked in as literals
   (the orange scale, box shadows).

   Load AFTER assets/css/app.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');

/* --------------------------------------------------------------------------
   1. Brand palette — mirrors :root in redesign.css
   -------------------------------------------------------------------------- */
:root {
  --brand: #f78815;              /* redesign.css --primary       */
  --brand-dark: #df7108;         /* redesign.css --primary-dark  */
  --brand-light: #fff4e8;        /* redesign.css --primary-light */
  --brand-heading: #181818;      /* redesign.css --heading       */
  --brand-text: #606060;         /* redesign.css --text          */
  --brand-page: #fbfaf8;         /* redesign.css body background */
  --brand-surface: #ffffff;      /* redesign.css --white         */
  --brand-subtle: #f8f9fb;       /* redesign.css --light-bg      */
  --brand-line: #e9e9e9;         /* redesign.css --border        */
  --brand-field-line: #e2e8f0;   /* redesign.css input border    */
  --brand-success: #15803d;      /* redesign.css --success       */
  --brand-danger: #c83232;       /* redesign.css --danger        */
  --brand-warning: #9a5a0a;      /* redesign.css --warning       */
  --brand-shadow-sm: 0 1px 2px rgba(24, 24, 24, 0.04);
  --brand-shadow-md: 0 14px 34px rgba(24, 24, 24, 0.07);
  --brand-shadow-card: 0 16px 40px rgba(60, 43, 25, 0.08);
  --brand-glow: 0 5px 14px rgba(247, 136, 21, 0.2);
  --brand-glow-hover: 0 8px 20px rgba(223, 113, 8, 0.25);
}

.ttn-required-mark {
  color: var(--brand-heading, #181818);
  font-weight: 650;
}

/* --------------------------------------------------------------------------
   2. Typeface — Parkinsans, as in redesign.css `body`
   -------------------------------------------------------------------------- */
:root {
  --font-body: "Parkinsans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Parkinsans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Parkinsans", ui-sans-serif, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Semantic tokens — re-pointed at the brand values.
      app.css already resolves every `bg-background`, `text-foreground`,
      `text-muted-foreground`, `hover:bg-accent`, `border`, `ring-ring` and
      `rounded-lg|md|sm` utility through these, so this is where the bulk of
      the retheme happens. HSL triplets, per the shadcn contract.
   -------------------------------------------------------------------------- */
:root {
  --background: 40 27% 98%;          /* #fbfaf8 */
  --foreground: 0 0% 9%;             /* #181818 */
  --card: 0 0% 100%;                 /* #ffffff */
  --card-foreground: 0 0% 9%;        /* #181818 */
  --popover: 0 0% 100%;              /* #ffffff */
  --popover-foreground: 0 0% 9%;     /* #181818 */
  --primary: 30 93% 53%;             /* #f78815 */
  --primary-foreground: 0 0% 100%;   /* #ffffff */
  --secondary: 220 27% 98%;          /* #f8f9fb */
  --secondary-foreground: 0 0% 9%;   /* #181818 */
  --muted: 220 27% 98%;              /* #f8f9fb */
  --muted-foreground: 0 0% 38%;      /* #606060 */
  --accent: 31 100% 96%;             /* #fff4e8 — brand hover wash */
  --accent-foreground: 28 91% 39%;   /* #bc5c09 */
  --destructive: 0 60% 49%;          /* #c83232 */
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 91%;                /* #e9e9e9 */
  --input: 214 32% 91%;              /* #e2e8f0 */
  --ring: 30 93% 53%;                /* #f78815 */
  --radius: 0.75rem;                 /* redesign.css --radius: 12px */
}

/* --------------------------------------------------------------------------
   4. Orange scale — the brand ramp, anchored on redesign.css's
      --primary (500), --primary-dark (600) and --primary-light (50).
      Selectors are reproduced verbatim from app.css so every variant
      (hover:, group-hover:, focus:, data-[state=active]:, /opacity) keeps
      working; only the literal channel values change.
   -------------------------------------------------------------------------- */

.border-orange-100 {
  --tw-border-opacity:1;
  border-color:rgb(255 235 213/var(--tw-border-opacity,1))
}
.border-orange-200 {
  --tw-border-opacity:1;
  border-color:rgb(254 213 170/var(--tw-border-opacity,1))
}
.border-orange-300 {
  --tw-border-opacity:1;
  border-color:rgb(252 186 117/var(--tw-border-opacity,1))
}
.border-orange-500 {
  --tw-border-opacity:1;
  border-color:rgb(247 136 21/var(--tw-border-opacity,1))
}
.\!bg-orange-100 {
  --tw-bg-opacity:1!important;
  background-color:rgb(255 235 213/var(--tw-bg-opacity,1))!important
}
.bg-orange-100 {
  --tw-bg-opacity:1;
  background-color:rgb(255 235 213/var(--tw-bg-opacity,1))
}
.bg-orange-50 {
  --tw-bg-opacity:1;
  background-color:rgb(255 244 232/var(--tw-bg-opacity,1))
}
.bg-orange-50\/30 {
  background-color:rgba(255,244,232,.3)
}
.bg-orange-500 {
  --tw-bg-opacity:1;
  background-color:rgb(247 136 21/var(--tw-bg-opacity,1))
}
.bg-orange-500\/10 {
  background-color:rgba(247,136,21,.1)
}
.from-orange-50 {
  --tw-gradient-from:#fff4e8 var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(255,244,232,0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-orange-500 {
  --tw-gradient-from:#f78815 var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(247,136,21,0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.to-orange-50 {
  --tw-gradient-to:#fff4e8 var(--tw-gradient-to-position)
}
.to-orange-600 {
  --tw-gradient-to:#df7108 var(--tw-gradient-to-position)
}
.\!text-orange-800 {
  --tw-text-opacity:1!important;
  color:rgb(150 74 13/var(--tw-text-opacity,1))!important
}
.text-orange-100 {
  --tw-text-opacity:1;
  color:rgb(255 235 213/var(--tw-text-opacity,1))
}
.text-orange-200 {
  --tw-text-opacity:1;
  color:rgb(254 213 170/var(--tw-text-opacity,1))
}
.text-orange-300 {
  --tw-text-opacity:1;
  color:rgb(252 186 117/var(--tw-text-opacity,1))
}
.text-orange-400 {
  --tw-text-opacity:1;
  color:rgb(250 157 61/var(--tw-text-opacity,1))
}
.text-orange-50 {
  --tw-text-opacity:1;
  color:rgb(255 244 232/var(--tw-text-opacity,1))
}
.text-orange-500 {
  --tw-text-opacity:1;
  color:rgb(247 136 21/var(--tw-text-opacity,1))
}
.text-orange-600 {
  --tw-text-opacity:1;
  color:rgb(223 113 8/var(--tw-text-opacity,1))
}
.text-orange-700 {
  --tw-text-opacity:1;
  color:rgb(188 92 9/var(--tw-text-opacity,1))
}
.text-orange-800 {
  --tw-text-opacity:1;
  color:rgb(150 74 13/var(--tw-text-opacity,1))
}
.accent-orange-500 {
  accent-color:#f78815
}
.shadow-orange-100 {
  --tw-shadow-color:#ffebd5;
  --tw-shadow:var(--tw-shadow-colored)
}
.shadow-orange-200 {
  --tw-shadow-color:#fed5aa;
  --tw-shadow:var(--tw-shadow-colored)
}
.ring-orange-100 {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(255 235 213/var(--tw-ring-opacity,1))
}
.ring-orange-300 {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(252 186 117/var(--tw-ring-opacity,1))
}
.ring-orange-400 {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(250 157 61/var(--tw-ring-opacity,1))
}
.hover\:border-orange-200:hover {
  --tw-border-opacity:1;
  border-color:rgb(254 213 170/var(--tw-border-opacity,1))
}
.hover\:border-orange-300:hover {
  --tw-border-opacity:1;
  border-color:rgb(252 186 117/var(--tw-border-opacity,1))
}
.hover\:border-orange-400:hover {
  --tw-border-opacity:1;
  border-color:rgb(250 157 61/var(--tw-border-opacity,1))
}
.hover\:bg-orange-100:hover {
  --tw-bg-opacity:1;
  background-color:rgb(255 235 213/var(--tw-bg-opacity,1))
}
.hover\:bg-orange-200:hover {
  --tw-bg-opacity:1;
  background-color:rgb(254 213 170/var(--tw-bg-opacity,1))
}
.hover\:bg-orange-50:hover {
  --tw-bg-opacity:1;
  background-color:rgb(255 244 232/var(--tw-bg-opacity,1))
}
.hover\:bg-orange-50\/50:hover {
  background-color:rgba(255,244,232,.5)
}
.hover\:bg-orange-600:hover {
  --tw-bg-opacity:1;
  background-color:rgb(223 113 8/var(--tw-bg-opacity,1))
}
.hover\:text-orange-600:hover {
  --tw-text-opacity:1;
  color:rgb(223 113 8/var(--tw-text-opacity,1))
}
.hover\:text-orange-700:hover {
  --tw-text-opacity:1;
  color:rgb(188 92 9/var(--tw-text-opacity,1))
}
.focus\:ring-orange-500:focus {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(247 136 21/var(--tw-ring-opacity,1))
}
.group:hover .group-hover\:bg-orange-200 {
  --tw-bg-opacity:1;
  background-color:rgb(254 213 170/var(--tw-bg-opacity,1))
}
.group:hover .group-hover\:text-orange-600 {
  --tw-text-opacity:1;
  color:rgb(223 113 8/var(--tw-text-opacity,1))
}
.group:hover .group-hover\:text-orange-700 {
  --tw-text-opacity:1;
  color:rgb(188 92 9/var(--tw-text-opacity,1))
}
.peer:checked~.peer-checked\:bg-orange-500 {
  --tw-bg-opacity:1;
  background-color:rgb(247 136 21/var(--tw-bg-opacity,1))
}
.peer:focus~.peer-focus\:ring-orange-300 {
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(252 186 117/var(--tw-ring-opacity,1))
}
.data-\[state\=active\]\:border-orange-500[data-state=active] {
  --tw-border-opacity:1;
  border-color:rgb(247 136 21/var(--tw-border-opacity,1))
}
.data-\[state\=active\]\:bg-orange-100[data-state=active] {
  --tw-bg-opacity:1;
  background-color:rgb(255 235 213/var(--tw-bg-opacity,1))
}
.data-\[state\=active\]\:bg-orange-500[data-state=active] {
  --tw-bg-opacity:1;
  background-color:rgb(247 136 21/var(--tw-bg-opacity,1))
}
.data-\[state\=active\]\:text-orange-600[data-state=active] {
  --tw-text-opacity:1;
  color:rgb(223 113 8/var(--tw-text-opacity,1))
}
.data-\[state\=active\]\:text-orange-700[data-state=active] {
  --tw-text-opacity:1;
  color:rgb(188 92 9/var(--tw-text-opacity,1))
}
.data-\[state\=inactive\]\:hover\:border-orange-200:hover[data-state=inactive] {
  --tw-border-opacity:1;
  border-color:rgb(254 213 170/var(--tw-border-opacity,1))
}
.data-\[state\=active\]\:hover\:bg-orange-500:hover[data-state=active] {
  --tw-bg-opacity:1;
  background-color:rgb(247 136 21/var(--tw-bg-opacity,1))
}

/* --------------------------------------------------------------------------
   5. Elevation — Tailwind ships cool black shadows; the Laravel UI casts them
      warm (rgba(60, 43, 25, …), see redesign.css .card / --shadow-md).
      Geometry is untouched; only the shadow colour changes.
   -------------------------------------------------------------------------- */
.shadow {
  --tw-shadow:0 1px 3px 0 rgba(60,43,25,.1),0 1px 2px -1px rgba(60,43,25,.1);
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)
}
.shadow-2xl {
  --tw-shadow:0 25px 50px -12px rgba(60,43,25,.25);
  --tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)
}
.shadow-lg {
  --tw-shadow:0 10px 15px -3px rgba(60,43,25,.1),0 4px 6px -4px rgba(60,43,25,.1);
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)
}
.shadow-md {
  --tw-shadow:0 4px 6px -1px rgba(60,43,25,.1),0 2px 4px -2px rgba(60,43,25,.1);
  --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)
}
.shadow-sm {
  --tw-shadow:0 1px 2px 0 rgba(60,43,25,.05);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)
}
.shadow-xl {
  --tw-shadow:0 20px 25px -5px rgba(60,43,25,.1),0 8px 10px -6px rgba(60,43,25,.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)
}
.hover\:shadow-lg:hover {
  --tw-shadow:0 10px 15px -3px rgba(60,43,25,.1),0 4px 6px -4px rgba(60,43,25,.1);
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)
}
.hover\:shadow-md:hover {
  --tw-shadow:0 4px 6px -1px rgba(60,43,25,.1),0 2px 4px -2px rgba(60,43,25,.1);
  --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)
}
.hover\:shadow-sm:hover {
  --tw-shadow:0 1px 2px 0 rgba(60,43,25,.05);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.data-\[state\=active\]\:shadow[data-state=active] {
  --tw-shadow:0 1px 3px 0 rgba(60,43,25,.1),0 1px 2px -1px rgba(60,43,25,.1);
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

/* --------------------------------------------------------------------------
   6. Brand detailing lifted from redesign.css
   -------------------------------------------------------------------------- */

/* Headings: Parkinsans is set optically wide — redesign.css pins
   letter-spacing to 0 and uses the 720 weight for h1/h2. */
.font-display {
  letter-spacing: 0;
}

.font-display.font-bold,
.font-display.font-extrabold,
.font-display.font-black {
  font-weight: 720;
}

/* Primary CTA: brand glow instead of Tailwind's neutral drop shadow
   (redesign.css .btn-primary / .btn-primary:hover). Scoped to real buttons
   and links so badges, avatars and the logo tile keep their flat fill. */
a.bg-orange-500:not([data-state]),
button.bg-orange-500:not([data-state]),
a.bg-orange-600:not([data-state]),
button.bg-orange-600:not([data-state]),
a.from-orange-500:not([data-state]),
button.from-orange-500:not([data-state]) {
  letter-spacing: 0.2px;
  box-shadow: var(--brand-glow);
}

a.bg-orange-500:not([data-state]):hover,
button.bg-orange-500:not([data-state]):hover,
a.bg-orange-600:not([data-state]):hover,
button.bg-orange-600:not([data-state]):hover,
a.from-orange-500:not([data-state]):hover,
button.from-orange-500:not([data-state]):hover {
  box-shadow: var(--brand-glow-hover);
}

/* Secondary CTA: warm outline, brand-dark label (redesign.css .btn-secondary). */
a.border-orange-500,
button.border-orange-500 {
  border-color: #f5b16a;
}

/* Fields: redesign.css focus treatment — brand border plus a 3px wash. */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(247, 136, 21, 0.12);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

::selection {
  background: var(--brand-light);
  color: var(--brand-dark);
}

/* --------------------------------------------------------------------------
   7. Brand lockup — the logo files the Laravel app already ships
      (ttn/public/tradie/v2/assets/logo-main.png, admin/assets/apple-touch-icon.png).

      Defined here rather than with Tailwind utilities because `w-auto`,
      `object-contain`, `max-w-full` and `sm:h-9` are absent from the
      compiled app.css — Tailwind only emits the classes it finds in the
      source HTML, and none of the React components used them.
   -------------------------------------------------------------------------- */

/* Full horizontal lockup, 543x120. Height-driven so the intrinsic ratio
   sets the width (~145px at 32px tall) instead of the width attribute. */
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}

@media (min-width: 640px) {
  .brand-logo {
    height: 36px;
  }
}

/* Mark only, for the dark footer — the artwork has a white ground rather
   than an alpha channel, so it sits in a white tile instead of on the slate. */
.brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}