/*
  Design tokens for Padmavathi Enterprises.
  Mood: a fresh dairy counter, anchored on the client's logo.
  This is the only file allowed to contain raw colour values.
*/

:root {
  /* Red, navy, green and leaf are sampled from the client's logo file.
     Contrast (WCAG 2.1), checked 2026-11-09:
       navy on milk 16.6 · navy on mist 15.0 · navy on green tint 14.7
       navy-muted on milk 7.6 · navy-muted on mist 6.9
       milk on red 4.8 · red on milk 4.8 (large headings only)
       red-deep on milk 6.3 · red-deep on mist 5.7
       green-deep on milk 6.0 · green-deep on mist 5.4 · green-deep on tint 5.3
       milk on navy 16.6 · leaf on navy 4.9
     Red misses AA as text on mist (4.4) and on navy (3.4). Use red-deep or milk there.
     Buttons: white on logo green is 4.49, just under AA, so light backgrounds use green-deep:
       white on button 6.0 · white on hover 7.7 · white on active 9.7 · button on milk 6.0 · button on mist 5.4
     Green-deep is only 2.8 against navy, so navy sections use a shade between the two:
       white on-dark 4.8 / hover 5.2 / active 5.5 · against navy 3.5 / 3.2 / 3.0 */
  --color-red: #e30908;
  --color-navy: #011a4d;
  --color-green: #168a0b;
  --color-leaf: #529c05;
  --color-red-deep: #c20807;
  --color-green-deep: #11730a;
  --color-milk: #fffefb;
  --color-mist: #eef3f9;
  --color-green-tint: #e8f4e2;
  --color-navy-muted: #46536f;
  --color-line: #cfd9e6;
  /* Sampled from the edges of the two Dodla banners, so empty parts of the hero blend in. */
  --banner-curd-left: #0196d7;
  --banner-curd-right: #016fb9;
  --banner-range-top: #bee8fd;
  --color-button: var(--color-green-deep);
  --color-button-hover: #0e6108;
  --color-button-active: #0b5006;
  --color-button-on-dark: #158509;
  --color-button-on-dark-hover: #147f09;
  --color-button-on-dark-active: #137a09;
  --color-button-text: #ffffff;
  --color-button-disabled: var(--color-line);
  --color-button-disabled-text: var(--color-navy-muted);

  /* Roles: sections should use these, not the raw colours above. */
  --surface: var(--color-milk);
  --surface-alt: var(--color-mist);
  --surface-fresh: var(--color-green-tint);
  --surface-inverse: var(--color-navy);
  --text: var(--color-navy);
  --text-muted: var(--color-navy-muted);
  --text-inverse: var(--color-milk);
  --accent: var(--color-red);
  --accent-ink: var(--color-red-deep);
  --fresh-ink: var(--color-green-deep);
  --fresh-on-dark: var(--color-leaf);
  --focus-ring: var(--color-navy);
  --button-fill: var(--color-button);
  --button-fill-hover: var(--color-button-hover);
  --button-fill-active: var(--color-button-active);
  --rule: var(--color-line);
  /* Form fields need 3:1 against the page, which the pale rule colour doesn't reach. */
  --rule-control: var(--color-navy-muted);

  /* Type */
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Mukta", "Segoe UI", "Noto Sans Telugu", system-ui, sans-serif;

  --step-n1: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.17rem + 0.36vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.37rem + 0.55vw, 1.8rem);
  --step-3: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem);
  --step-4: clamp(2.1rem, 1.85rem + 1.15vw, 2.8rem);
  --step-5: clamp(2.4rem, 2rem + 1.7vw, 3.4rem);

  /* Nav links: the one-row header (17 to 18px) and the opened menu (18 to 20px). */
  --nav-size-row: clamp(1.0625rem, 0.768rem + 0.446vw, 1.125rem);
  --nav-size-menu: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --measure: 62ch;

  /* Fluid spacing */
  --space-3xs: clamp(0.25rem, 0.2378rem + 0.0543vw, 0.2813rem);
  --space-2xs: clamp(0.5rem, 0.4755rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7133rem + 0.163vw, 0.8438rem);
  --space-s: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4266rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9022rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8533rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8043rem + 0.8696vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.7065rem + 1.3043vw, 6.75rem);
  --space-section: clamp(3.5rem, 1.7391rem + 7.8261vw, 8rem);

  /* Page frame */
  --content-max: 74rem;
  --gutter: clamp(1rem, 0.375rem + 2.78vw, 2.5rem);
  /* Space the sticky header covers, so anchor jumps don't hide headings. */
  --header-offset: 7.5rem;
  /* Logo heights: the header value steps up at the 40em and 64em breakpoints. */
  --logo-height: 3rem;
  /* Height of the sticky header at each breakpoint: it caps the hero banner. */
  --header-height: 3.1875rem;
  /* Phones only: keeps the red block off the screen edge without making the header taller. */
  --logo-clearance: 1px;
  --logo-height-footer: 5.5rem;
  /* The truck photo is only 485px wide, so it is never shown larger. */
  --photo-truck-max: 485px;

  /* Shape: cards echo the logo's red block, while full-width bands stay square. */
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-hair: 1px solid var(--rule);
  --border-firm: 2px solid var(--text);
  --border-control: 1px solid var(--rule-control);
  --border-button: 1px solid var(--color-button);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-quick: 150ms;

  /* Tapered curve and leaves that echo the logo. */
  --swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath fill='%23e30908' d='M1 10C32 2 85 0 119 4 86 5 40 7 1 10Z'/%3E%3C/svg%3E");
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23529c05'%3E%3Cpath d='M11 21C6 19 3 15 3 8c5 1 8.5 4.5 8 13Z'/%3E%3Cpath d='M13 21c-.6-9 3-14 9-16 .4 7-2.6 13.5-9 16Z'/%3E%3C/g%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23011a4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}