@layer reset, base, components, page, utilities;

/* The wordmark face. Only the 700 weight ships: --font-brand is used for the wordmark and
   the "feito com" link, nothing else. */
@font-face {
  font-family: 'Rubik';
  /* Relative on purpose: propshaft rewrites it to the digested path, an absolute /assets/ URL it won't. */
  src: url("/assets/Rubik-700-8ad03e01.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* typography */
  --font-brand: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;

  --text-body:    var(--text-base);
  --text-caption: var(--text-sm);
  --text-label:   var(--text-xs);

  --font-weight-extralight: 200;
  --font-weight-light:      300;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  /* line height */
  --line-height-xs:   1;
  --line-height-sm:   1.1;
  --line-height-base: 1.25;
  --line-height-md:   1.375;
  --line-height-lg:   1.5;
  --line-height-xl:   1.6;

  /* colors — every hex below comes from Brand/dist/svc/theme.css (theme "uma-nota").
     Each value is solved for the contrast it has to clear, not chosen; do not adjust by eye. */

  /* brand — not named after its value, on purpose: the token it replaced was --color-crimson */
  --color-brand: #1C4E8F;
  --color-brand-hover: #1C467E;
  --color-brand-dark: var(--color-brand-hover);
  /* The brand as it clears a dark ground (theme.css's dark --color-brand). For accents that sit
     on a dark surface in either theme — the toast, the alert card gradient. */
  --color-brand-light: #7BA8DA;
  --color-brand-active: #1B406F;
  --color-brand-wash: #E4EAF2; /* the brand behind its own text */
  --color-brand-rgb: 28, 78, 143;
  --color-on-brand: #F6F3EE;

  /* The landing hero and the navbar over it. Theme-independent: the same in light and dark. */
  --color-hero: #1C4E8F;
  --color-hero-floor: #123157; /* where a hero gradient ends */
  --color-on-hero: #F6F3EE;

  /* primary is the brand. Public booking overrides these per business (bookings_helper). */
  --color-primary: var(--color-brand);
  --color-primary-hover: var(--color-brand-hover);
  --color-primary-border: var(--color-brand-hover);
  --color-primary-active: var(--color-brand-active);
  --color-primary-light: var(--color-brand-wash);
  --color-primary-rgb: var(--color-brand-rgb);
  /* Lightened primary for selected tabs (agenda day-tab, history month-tab) */
  --color-primary-selected: color-mix(in srgb, var(--color-primary) 85%, white);

  /* success colors */
  --color-success: #2E7D4F;
  --color-success-wash: #E6EFEA;
  --color-success-text: #2D794D;
  --color-success-rgb: 46, 125, 79;
  --color-success-dark: var(--color-success);
  --color-on-success: #F6F3EE; /* the label a success button can carry */
  --color-success-dark-hover: #2B6F47;
  --color-success-active: #296240;
  --color-success-border: #C0D8CA; /* a ring round a success wash — decoration, stepped */

  /* warning colors */
  --color-warning: #B0761A;
  --color-warning-wash: #F6EFE4;
  --color-warning-text: #926319;
  --color-warning-rgb: 176, 118, 26;
  --color-warning-dark: var(--color-warning);
  --color-on-warning: #1A1714; /* the label a warning button can carry — ink, not white */
  --color-warning-dark-hover: #BA8838;
  --color-warning-active: #BB8A3C;
  --color-warning-active-border: #775218;

  /* danger colors */
  --color-danger: #B3261E;
  --color-danger-wash: #F6E5E4;
  --color-danger-text: #B3261E;
  --color-danger-rgb: 179, 38, 30;
  --color-danger-light: var(--color-danger-wash);
  --color-on-danger: #F6F3EE;
  --color-danger-hover: #9E241D;
  --color-danger-active: #8B221B;
  --color-danger-active-border: #79201A;

  /* WhatsApp colors */
  --color-whatsapp: #23AA54;
  --color-on-whatsapp: #1A1714; /* ink — white is 3.0 on the light green, 2.0 on the dark */
  --color-whatsapp-hover: #22954B;
  --color-whatsapp-border: #22954B; /* the rest edge and the pressed fill */
  --color-whatsapp-active-border: #20723C; /* the pressed edge is what tells the press */
  --color-whatsapp-read: #489CC0;
  --color-whatsapp-read-outbound: #3F4748; /* on the green bubble — no light colour clears it */
  /* The ground a chat sits on, and the outbound bubble that sits on it. A flat tint only:
     WhatsApp's doodle wallpaper is Meta's artwork, and the colour underneath it is what
     makes a mock read as a chat anyway. The bubble is the pale green of a sent message,
     not --color-whatsapp — that one is a button fill and swamps a paragraph of text. */
  --color-whatsapp-chat: #ECE5DD;
  --color-whatsapp-bubble: #D9FDD3;
  --color-whatsapp-bubble-in: #FFFFFF; /* a received message: lighter than the ground, both themes */
  --color-on-whatsapp-bubble: #1A1714;

  /* gray scale — roles, not steps. The ramp inverts in dark by itself. */
  --color-gray-100: #F6F6F6; /* = bg-secondary */
  --color-gray-200: #EDECEC; /* = bg-tertiary */
  --color-gray-300: #E4E3E3; /* = border */
  --color-gray-400: #D1D1D0; /* a step; no role */
  --color-gray-500: #959492; /* = border-strong; an icon at 3:1 */
  --color-gray-600: #777573; /* = text-muted; the neutral button */
  --color-gray-700: #6A6866; /* its hover */
  --color-gray-800: #5F5D5A; /* its pressed */
  --color-gray-900: #1A1714; /* = text */
  --color-black: #1A1714; /* ink, in both modes */

  /* text and chrome */
  --color-text: #1A1714;
  --color-text-muted: #777573;
  --color-text-subtle: #959493;
  --color-text-light: var(--color-text-muted);
  --color-muted: var(--color-text-muted);
  --color-link: var(--color-brand);
  --color-border: #E4E3E3;
  --color-border-strong: #959492;
  --color-border-hover: var(--color-border-strong);
  --color-border-light: #EDECEC; /* a hairline inside a card */

  /* surfaces */
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F6F6F6;
  --color-bg-card: #F8F8F8;
  --color-bg-white: var(--color-bg);
  --color-bg-primary: var(--color-bg);
  --color-bg-light: var(--color-bg-secondary);
  --color-bg-tertiary: #EDECEC; /* the pressed row */
  --color-bg-hover: var(--color-bg-tertiary);
  --color-bg-card-alt: #EFEFEF; /* where a card gradient ends */

  /* border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px; /* content cards — the radius public booking's cards use */
  --radius-pill: 99px;

  /* layout and spacing */
  --content-padding: 16px;
  --row-gap: 14px;
  --row-padding: 14px;
  --section-gap: 16px;
  --section-label-gap: 8px;
  /* The back / close control every header carries. One size everywhere, big
     enough to hit with a thumb without aiming. The chevron's ink starts a third
     of the way into its box, so the button is pulled back by that plus its own
     centring padding to line the arrow up with the text below it — capped at the
     container's padding, or the tap circle bleeds off the screen edge. */
  --back-tap-size: 48px;
  --back-icon-size: 32px;
  --back-ink-inset: min(
    calc((var(--back-tap-size) - var(--back-icon-size)) / 2 + var(--back-icon-size) / 3),
    var(--content-padding)
  );

  /* Wizard and form vertical rhythm — the distances every single-question screen
     agrees on, from the chrome at the top down to the button. See docs/topics/WIZARDS.md */
  --wizard-header-gap: 16px;
  --wizard-title-gap: 20px;
  --wizard-body-gap: 44px;
  --wizard-hint-gap: 16px;
  /* Separation between the last field and an in-flow CTA. See docs/topics/WIZARDS.md */
  --cta-gap: 36px;
  --inline-space: 1ch;
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
  --main-width: 1400px;

  /* Desktop (hybrid responsive). Screens keep their one-column layout; only
     the chrome changes at 1024px and up — the same line public booking splits
     at. Media queries can't read tokens, so every desktop block repeats the
     1024px literally. --app-column caps the app's content column. */
  --app-column: 600px;

  /* Appointment state colors - light mode.
     A state's identity lives in its BORDER, not its fill: pending and confirmed are ΔE 8 apart
     by wash and ΔE 62 by border. Every state chip renders its border; cancelled is the one
     state with no border, which is what tells it from pending. */
  --color-state-pending-bg: #F1F1F1;
  --color-state-pending-text: #5F5D5B;
  --color-state-pending-border: #C3C3C2;

  --color-state-confirmed-bg: #DBE3ED;
  --color-state-confirmed-text: #1C4E8F;
  --color-state-confirmed-border: #1C4E8F;

  --color-state-cancelled-bg: #F1F1F1;
  --color-state-cancelled-text: #5F5D5B;

  /* Built like pending and confirmed — chip wash strength and the border rule differ from the
     semantic wash/text pairs, so these are not aliases of them. */
  --color-state-completed-bg: #DEEAE3;
  --color-state-completed-text: #2C754A;
  --color-state-completed-border: #2E7D4F;

  --color-state-payment-due-bg: #F3DCDB;
  --color-state-payment-due-text: #B3261E;
  --color-state-payment-due-border: #B3261E;

  --color-state-in_progress-bg: #F2E9DA;
  --color-state-in_progress-text: #8C5F19;
  --color-state-in_progress-border: #B0761A;

  /* accent colors for visualizations */
  --color-accent-green: var(--color-success);
  --color-accent-blue: var(--color-brand);
  --color-accent-red: var(--color-danger);
  --color-accent-amber: var(--color-warning);
  --color-accent-amber-light: var(--color-warning-wash);
  --color-accent-amber-dark: var(--color-warning-text);
  --color-accent-amber-soft: #D8BB8D; /* the warning at half strength; illustration only */

  /* z index */
  --safe-top: max(16px, env(safe-area-inset-top));
  --safe-bottom: env(safe-area-inset-bottom);

  /* Floating tab bar pill: horizontal inset from the viewport edges, how far
     it floats above the bottom, and the pill's own height. --nav-bar-height is
     the total space it occupies from the bottom of the viewport, which page
     content pads against.

     --tab-bar-bottom doesn't stack the lift on top of the full safe area: on a
     home-indicator iPhone that reads as a 46px gap and the bar looks unmoored.
     The pill only has to clear the indicator itself (which sits well inside the
     34px inset), so we shave the inset back and floor it at the lift for
     devices with no safe area at all. */
  --tab-bar-inset: 20px;
  --tab-bar-lift: 12px;
  --tab-bar-pill-height: 60px;
  --tab-bar-bottom: max(var(--tab-bar-lift), calc(var(--safe-bottom) - 16px));
  --nav-bar-height: calc(var(--tab-bar-pill-height) + var(--tab-bar-bottom));
  --z-popup: 10;
  --z-nav: 1000;
  --z-flash: 1010;
  --z-tooltip: 1020;
  --z-page: 1050;
  --z-modal: 1100;

  /* Focus rings for keyboard navigation */
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 1px;
  --focus-ring-size: 2px;
  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);

  /* dialogs */
  --dialog-duration: 150ms;
}

/* Desktop: the tab pill becomes a left rail, so nothing floats over the bottom
   and content stops padding against it. */
@media (min-width: 1024px) {
  :root {
    --nav-bar-height: 0px;
  }
}

/* dark theme — values from the [data-theme="dark"] block of theme.css */
[data-theme="dark"] {
  --color-brand: #7BA8DA;
  --color-brand-hover: #8CB3DD;
  --color-brand-active: #9BBCDF;
  --color-brand-wash: #252D36;
  --color-brand-rgb: 123, 168, 218;
  --color-on-brand: #1A1714;

  /* gray scale — the same roles, inverted */
  --color-gray-100: #20201F;
  --color-gray-200: #2D2D2C;
  --color-gray-300: #323231;
  --color-gray-400: #494847;
  --color-gray-500: #797775;
  --color-gray-600: #8F8E8B;
  --color-gray-700: #9D9C99;
  --color-gray-800: #AAA8A5;
  --color-gray-900: #F6F3EE;

  /* text and chrome */
  --color-text: #F6F3EE;
  --color-text-muted: #8F8E8B;
  --color-text-subtle: #6D6C6A;
  --color-border: #323231;
  --color-border-strong: #797775;
  --color-border-light: #272626;

  /* surfaces */
  --color-bg: #121212;
  --color-bg-secondary: #20201F;
  --color-bg-card: #292928;
  --color-bg-tertiary: #2D2D2C;
  --color-bg-card-alt: #353534;

  /* success colors */
  --color-success: #2E7D4F;
  --color-success-wash: #17251D;
  --color-success-text: #5A9772;
  --color-success-rgb: 46, 125, 79;
  --color-success-dark-hover: #2B6F47;
  --color-success-active: #2B6D46;
  --color-success-border: #1A3224;

  /* warning colors */
  --color-warning: #B0761A;
  --color-warning-wash: #2E2413;
  --color-warning-text: #B7832F;
  --color-warning-dark-hover: #BA8838;
  --color-warning-active: #C29751;
  --color-warning-active-border: #CBA66B;

  /* danger colors. Hover and pressed are the same fill on purpose; the edge shows the press. */
  --color-danger: #B62E26;
  --color-danger-wash: #2F1614;
  --color-danger-text: #C86861;
  --color-danger-rgb: 182, 46, 38;
  --color-danger-hover: #BE463E;
  --color-danger-active: #BE463E;
  --color-danger-active-border: #CE7972;

  /* WhatsApp */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #42D779;
  --color-whatsapp-border: #5BDB89;
  --color-whatsapp-active-border: #74DF9A;
  --color-whatsapp-read: #53BDEB;
  --color-whatsapp-read-outbound: #566569;
  --color-whatsapp-chat: #0B141A;
  --color-whatsapp-bubble: #005C4B;
  --color-whatsapp-bubble-in: #1F2C33;
  --color-on-whatsapp-bubble: #E9EDEF;

  /* Appointment state colors - dark mode */
  --color-state-pending-bg: #292928;
  --color-state-pending-text: #B2B0AC;
  --color-state-pending-border: #565554;

  --color-state-confirmed-bg: #29333E;
  --color-state-confirmed-text: #7BA8DA;
  --color-state-confirmed-border: #7BA8DA;

  --color-state-cancelled-bg: #292928;
  --color-state-cancelled-text: #B2B0AC;

  --color-state-completed-bg: #182A1F;
  --color-state-completed-text: #5E9975;
  --color-state-completed-border: #327F52;

  --color-state-payment-due-bg: #361816;
  --color-state-payment-due-text: #CA6D66;
  --color-state-payment-due-border: #BC423A;

  --color-state-in_progress-bg: #352814;
  --color-state-in_progress-text: #BA8838;
  --color-state-in_progress-border: #B0761A;

  /* accent colors for visualizations — the aliases above follow the theme by themselves */
  --color-accent-amber-soft: #614416;
}