/* ==========================================================================
   ONE DESWIK — DEVELOPER ADD-ONS
   --------------------------------------------------------------------------
   Variables and components requested by product teams that don't fit cleanly
   into the foundation or product-specific layers. Layered LAST in the
   cascade so it can override earlier rules where needed.

   To use these on any page, add this file as the final stylesheet link:
     <link rel="stylesheet" href="src/addons.css" />
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TERTIARY BUTTON
   --------------------------------------------------------------------------
   Text-only button for actions that are less prominent than Default but
   still tappable. Lower contrast against the page than Default. Should
   never carry an icon — that's reserved for higher-emphasis buttons.
   -------------------------------------------------------------------------- */

@import url('./one-deswik-base.css'); /* for colour tokens, etc. */

button.tertiary {
  background-color: var(--gray-3);
  border-color: var(--gray-3);
  color: var(--gray-10);
}
button.tertiary:hover {
  background-color: var(--gray-4);
  border-color: var(--gray-4);
  color: var(--gray-10);
}
button.tertiary:focus {
  background-color: var(--gray-5);
  border-color: var(--gray-5);
  color: var(--gray-10);
}


/* --------------------------------------------------------------------------
   2. ICON SIZE UTILITIES
   --------------------------------------------------------------------------
   Three named sizes so callers say "small / medium / large" instead of
   resolving to a --size-N token at the call site. Applies to any icon
   element (Font Awesome <i class="fa-solid …">, the product layer's
   <i class="icon-…">, or a plain inline-flex icon shell).

       <i class="fa-solid fa-gear icon-sm"></i>      ⟶  --size-3
       <i class="fa-solid fa-gear icon-md"></i>      ⟶  --size-4 (default)
       <i class="fa-solid fa-gear icon-lg"></i>      ⟶  --size-7
   -------------------------------------------------------------------------- */

.icon-sm { width: var(--size-3); height: var(--size-3); font-size: var(--size-3); }
.icon-md { width: var(--size-4); height: var(--size-4); font-size: var(--size-4); }
.icon-lg { width: var(--size-7); height: var(--size-7); font-size: var(--size-7); }


/* --------------------------------------------------------------------------
   3. SIMPLIFIED TYPOGRAPHY
   --------------------------------------------------------------------------
   Three named text styles that bundle colour + size + weight, so callers
   don't compose tokens at every site. They override --font-size-base so
   the foundation's body * calc still applies and font-size scaling
   behaves consistently with the heading utilities.

       <p class="text-default">…</p>   --text-color, --size-4, regular
       <p class="text-muted">…</p>     --gray-7,     --size-4, regular
       <p class="text-subtle">…</p>    --gray-8,     --size-3, semibold
   -------------------------------------------------------------------------- */

.text-default {
  --font-size-base: var(--size-4);
  color: var(--text-color);
  font-weight: 400;
}
.text-muted {
  --font-size-base: var(--size-4);
  color: var(--gray-7);
  font-weight: 400;
}
.text-subtle {
  --font-size-base: var(--size-3);
  color: var(--gray-8);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   4. SPACING VARIABLES
   --------------------------------------------------------------------------
   Aliases of the foundation --size-* scale, named so developers can signal
   intent at the call site:

       --space-N  → gaps, padding, margins, page layout spacing
       --size-N   → element dimensions (icon size, font size, etc.)

   Same underlying values; different vocabulary. New code targeting layout
   should reach for --space-N; existing --size-N references continue to
   work and can be migrated gradually.
   -------------------------------------------------------------------------- */

:root {
  --space-1px: var(--size-1px);
  --space-2px: var(--size-2px);
  --space-1:  var(--size-1);
  --space-2:  var(--size-2);
  --space-3:  var(--size-3);
  --space-4:  var(--size-4);
  --space-5:  var(--size-5);
  --space-6:  var(--size-6);
  --space-7:  var(--size-7);
  --space-8:  var(--size-8);
  --space-9:  var(--size-9);
  --space-10: var(--size-10);

  /* T-shirt aliases — only adopt these when a product works at 3-5 distinct
     values per role. If you'd reach past xl, fall back to --space-N. */
  --gap-xs:     var(--space-1);
  --gap-sm:     var(--space-2);
  --gap-md:     var(--space-3);
  --gap-lg:     var(--space-5);
  --gap-xl:     var(--space-7);

  --margin-xs:  var(--space-2);
  --margin-sm:  var(--space-3);
  --margin-md:  var(--space-5);
  --margin-lg:  var(--space-7);
  --margin-xl:  var(--space-8);

  --padding-xs: var(--space-1);
  --padding-sm: var(--space-2);
  --padding-md: var(--space-3);
  --padding-lg: var(--space-5);
  --padding-xl: var(--space-7);
}


/* --------------------------------------------------------------------------
   5. TOOLTIP MESSAGING
   --------------------------------------------------------------------------
   Pure-CSS tooltips via the data-tooltip attribute. The message is rendered
   in a ::after pseudo-element — no JavaScript required.

       Direct trigger (button, chip, etc.):
           <button data-tooltip="Export to CSV">…</button>

       Disabled-button wrapper (disabled elements may block pointer events
       in some browsers, so place data-tooltip on a parent span):
           <span data-tooltip="…" style="display:inline-block">
             <button disabled style="pointer-events:none">…</button>
           </span>

   Force the tooltip open for documentation with data-tooltip-show on the
   same element that carries data-tooltip.
   -------------------------------------------------------------------------- */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 220px;
  background: var(--gray-10);
  color: var(--background);
  padding: var(--size-1) var(--size-3);
  border-radius: var(--border-radius-1);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 200;
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gray-10);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 200;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip][data-tooltip-show]::after,
[data-tooltip][data-tooltip-show]::before {
  opacity: 1;
}