/* ==========================================================================
   Ridgeline: design tokens for Down South Roofing (v1, draft for client review)
   Canvas: https://claude.ai/artifact/TbugefUWnEbFM3y6G5XFHJ (private until shared)

   Scoped to .ridgeline so it can sit inside a shared multi-tenant app without
   restyling anyone else. Put the class on the tenant's root element.
   Contrast ratios in comments are WCAG 2.2, computed from these hex values.
   ========================================================================== */

.ridgeline {
  /* Asphalt: warm neutrals. Text, dark sections, structure. */
  --asphalt-950: #141311;
  --asphalt-900: #1E1C1A; /* 16.15:1 on limewash-50 */
  --asphalt-800: #2B2825;
  --asphalt-700: #3D3934;
  --asphalt-600: #5A544D; /* 7.11:1 on limewash-50: the floor for body copy */
  --asphalt-500: #756E66; /* 5.03:1 on white: input borders */
  --asphalt-400: #9A928A;
  --asphalt-300: #BDB6AD;
  --asphalt-200: #D9D3CA;
  --asphalt-100: #ECE7DF;

  /* Limewash: the page. */
  --limewash-50: #FBF9F5;
  --limewash-100: #F4F0E9;
  --white: #FFFFFF;

  /* Marker: the next step. Nothing else. */
  --marker-800: #8A3406;  /* 7.76:1 on limewash-50: link hover */
  --marker-700: #B04208;  /* 5.50:1 on limewash-50: orange words on light */
  --marker-600: #D4520A;  /* 3.99:1: display words 24px+ only */
  --marker-550: #E85F12;  /* pressed */
  --marker-500: #F26B1D;  /* brand orange. Asphalt-900 label = 5.58:1. Never white text (3.05:1) */
  --marker-400: #FF8A3D;  /* hover; 7.92:1 on asphalt-950: orange words on dark */
  --marker-300: #FFB080;
  --marker-100: #FDE6D6;
  --marker-50:  #FEF3EA;

  /* Signal and status. Always paired with an icon and words. */
  --signal: #D92D20;      /* white text 4.83:1. Active leaks, emergency call, Built for the Brave */
  --error: #B42318;
  --error-bg: #FDECEA;    /* error on error-bg 5.75:1 */
  --success: #2D6A3E;
  --success-bg: #E7F2EA;  /* success on success-bg 5.64:1 */

  /* Roles: build components from these, not from the ramps. */
  --color-bg: var(--limewash-50);
  --color-surface: var(--white);
  --color-surface-sunken: var(--limewash-100);
  --color-text: var(--asphalt-900);
  --color-text-muted: var(--asphalt-600);
  --color-line: var(--asphalt-200);
  --color-line-strong: var(--asphalt-900);
  --color-border-input: var(--asphalt-500);
  --color-dark: var(--asphalt-950);
  --color-on-dark: var(--limewash-50);
  --color-on-dark-muted: var(--asphalt-300);
  --color-action: var(--marker-500);
  --color-action-hover: var(--marker-400);
  --color-action-pressed: var(--marker-550);
  --color-on-action: var(--asphalt-900);
  --color-action-tab: var(--asphalt-900);
  --color-accent-text: var(--marker-700);
  --color-accent-text-on-dark: var(--marker-400);
  --color-focus: var(--asphalt-900);
  --color-focus-on-dark: var(--limewash-50);
  --color-emergency: var(--signal);

  /* Familiar sans-serif shapes throughout, including a conventional ampersand. */
  --font-display: 'Arial Black', Arial, Helvetica, sans-serif;
  --font-text: Arial, Helvetica, sans-serif;
  --font-label: Arial, Helvetica, sans-serif;
  --stretch-display: 125%;
  --stretch-text: 100%;
  --tracking-display: -0.035em;
  --tracking-heading: -0.03em;
  --tracking-label: 0.08em;

  /* Space: steps of 4 and 8. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius: bigger surface, rounder corner. Title blocks and gables stay square. */
  --radius-0: 0;
  --radius-xs: 4px;   /* tags, stamps */
  --radius-sm: 6px;   /* buttons, inputs */
  --radius-md: 10px;  /* choice cards, day buttons */
  --radius-lg: 16px;  /* panels, notepad */
  --radius-xl: 28px;  /* phone sheets */
  --radius-pill: 999px;

  /* Elevation: only what floats gets a shadow. */
  --elev-0: 0 0 0 1px var(--asphalt-200);
  --elev-1: 0 24px 48px -28px rgba(30, 28, 26, .30);
  --elev-2: 0 18px 40px -14px rgba(20, 19, 17, .55), 0 2px 6px rgba(20, 19, 17, .20);
  --elev-3: 0 40px 80px -20px rgba(20, 19, 17, .55);

  /* Motion. Everything stops under prefers-reduced-motion. */
  --ease-settle: cubic-bezier(.2, .7, .2, 1);
  --dur-color: 160ms;
  --dur-nudge: 200ms;
  --dur-lift: 360ms;
  --dur-drift: 1100ms;

  /* Layers: one overlay at a time. */
  --z-header: 100;
  --z-action-bar: 200;
  --z-launcher: 300;
  --z-chat: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Signature textures: 6:12 pitch = 26.565deg. */
  --hatch-dark: repeating-linear-gradient(-26.565deg, rgba(251, 249, 245, .035) 0 1px, transparent 1px 16px);
  --hatch-light: repeating-linear-gradient(-26.565deg, rgba(30, 28, 26, .05) 0 1px, transparent 1px 12px);

  /* Layout */
  --content-max: 1280px;
  --margin-phone: 20px;
  --margin-tablet: 40px;
  --margin-desktop: 80px;
  --target-min: 44px;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-stretch: var(--stretch-text);
}

/* ---------- Type styles (phone size -> desktop size) ---------- */
.ridgeline .t-display-1 { font: 800 clamp(46px, 3.6rem + 6vw, 120px)/0.92 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); }
.ridgeline .t-display-2 { font: 800 clamp(40px, 2.6rem + 4vw, 88px)/0.95 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); }
.ridgeline .t-display-3 { font: 800 clamp(34px, 2rem + 2.6vw, 64px)/0.98 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); }
.ridgeline .t-heading-1 { font: 800 clamp(30px, 1.6rem + 1.2vw, 44px)/1 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-heading); }
.ridgeline .t-heading-2 { font: 800 clamp(26px, 1.4rem + .5vw, 32px)/1.05 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-heading); }
.ridgeline .t-title     { font: 700 clamp(19px, 1.1rem + .2vw, 21px)/1.25 var(--font-text); }
.ridgeline .t-lead      { font: 400 clamp(18px, 1rem + .4vw, 22px)/1.45 var(--font-text); }
.ridgeline .t-body      { font: 400 17px/1.55 var(--font-text); }
.ridgeline .t-small     { font: 400 15px/1.5 var(--font-text); color: var(--color-text-muted); }
.ridgeline .t-label     { font: 500 12px/1.3 var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ---------- Gable frames: roof rises a quarter of the width ---------- */
.ridgeline .gable     { clip-path: polygon(50% 0, 100% var(--rise), 100% 100%, 0 100%, 0 var(--rise)); overflow: hidden; }
.ridgeline .gable-3x4 { aspect-ratio: 3 / 4; --rise: 18.75%; }
.ridgeline .gable-4x5 { aspect-ratio: 4 / 5; --rise: 20%; }
.ridgeline .gable-2x3 { aspect-ratio: 2 / 3; --rise: 16.667%; }
.ridgeline .gable-1x1 { aspect-ratio: 1 / 1; --rise: 25%; }
.ridgeline .gable > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Focus and motion ---------- */
.ridgeline :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ridgeline .on-dark :focus-visible { outline-color: var(--color-focus-on-dark); }
@media (prefers-reduced-motion: reduce) {
  .ridgeline *, .ridgeline *::before, .ridgeline *::after { animation: none !important; transition: none !important; }
}

/* ---------- Tailwind v4 mapping ----------
   Browsers ignore this block. In a Tailwind v4 build it exposes the tokens as
   utilities (bg-marker-500, text-asphalt-900, shadow-raised ...). The values point
   at the scoped variables above, so the utilities only resolve inside .ridgeline.
   Check the host app's theming rules before adding it globally. */
@theme inline {
  --color-asphalt-950: var(--asphalt-950);
  --color-asphalt-900: var(--asphalt-900);
  --color-asphalt-800: var(--asphalt-800);
  --color-asphalt-700: var(--asphalt-700);
  --color-asphalt-600: var(--asphalt-600);
  --color-asphalt-500: var(--asphalt-500);
  --color-asphalt-400: var(--asphalt-400);
  --color-asphalt-300: var(--asphalt-300);
  --color-asphalt-200: var(--asphalt-200);
  --color-asphalt-100: var(--asphalt-100);
  --color-limewash-50: var(--limewash-50);
  --color-limewash-100: var(--limewash-100);
  --color-marker-800: var(--marker-800);
  --color-marker-700: var(--marker-700);
  --color-marker-600: var(--marker-600);
  --color-marker-550: var(--marker-550);
  --color-marker-500: var(--marker-500);
  --color-marker-400: var(--marker-400);
  --color-marker-300: var(--marker-300);
  --color-marker-100: var(--marker-100);
  --color-marker-50: var(--marker-50);
  --color-signal: var(--signal);
  --color-error: var(--error);
  --color-error-bg: var(--error-bg);
  --color-success: var(--success);
  --color-success-bg: var(--success-bg);
  --shadow-raised: var(--elev-1);
  --shadow-floating: var(--elev-2);
  --shadow-overlay: var(--elev-3);
}
/* Fonts, radii and easing keep their scoped names; use them with Tailwind's
   variable shorthand, e.g. font-(family-name:--font-display), rounded-(--radius-md). */