/*
 * Brand layer for Twenty — overrides design tokens WITHOUT forking Twenty.
 *
 * Twenty v2.9.0 drives its entire theme from CSS custom properties defined in
 * twenty-ui/src/theme-constants/theme-light.css and theme-dark.css (991 vars
 * each, scoped to .light / .dark on <html>). The JS side does not import
 * colour constants — ThemeProvider.computeThemeFromCss() reads the *computed*
 * values back out of the DOM, so overriding a variable here changes both the
 * CSS and what styled-components see.
 *
 * This file is loaded after Twenty's own stylesheets, but route-level CSS
 * chunks are appended lazily AFTER it, so cascade order alone is not a safe
 * guarantee across upgrades. The selectors below are therefore html.light /
 * html.dark (0,1,1) rather than Twenty's .light / .dark (0,1,0): they win on
 * specificity no matter where a future release puts the token declarations.
 *
 * PLACEHOLDER PALETTE — replace the accent scale with the real brand colours.
 * Scale semantics follow Radix: 1-2 page backgrounds, 3-5 component
 * backgrounds, 6-8 borders, 9-10 solid fills, 11 accessible text, 12 headings.
 */

html.light {
  --t-accent-accent1: #f5fbf8;
  --t-accent-accent2: #ebf7f1;
  --t-accent-accent3: #d8f0e4;
  --t-accent-accent4: #c2e8d4;
  --t-accent-accent5: #a9dec2;
  --t-accent-accent6: #8bd0ab;
  --t-accent-accent7: #63bd8f;
  --t-accent-accent8: #2ea36c;
  --t-accent-accent9: #0f8a56;
  --t-accent-accent10: #0c7a4c;
  --t-accent-accent11: #0a6b43;
  --t-accent-accent12: #073a25;

  /* Semantic aliases Twenty maps onto the scale above. */
  --t-accent-primary: #a9dec2;
  --t-accent-secondary: #a9dec2;
  --t-accent-tertiary: #d8f0e4;
  --t-accent-quaternary: #ebf7f1;
  --t-accent-accent3570: #2ea36c;
  --t-accent-accent4060: #2ea36c;

  /* Blue-keyed tokens used for selection / links / focus rings. */
  --t-border-color-blue: #63bd8f;
  --t-background-transparent-blue: rgba(15, 138, 86, 0.08);
  --t-color-blue: #0f8a56;
}

html.dark {
  --t-accent-accent1: #0b1410;
  --t-accent-accent2: #0f1c16;
  --t-accent-accent3: #12291e;
  --t-accent-accent4: #143526;
  --t-accent-accent5: #16412e;
  --t-accent-accent6: #1a5038;
  --t-accent-accent7: #1f6545;
  --t-accent-accent8: #268056;
  --t-accent-accent9: #2f9e68;
  --t-accent-accent10: #38b076;
  --t-accent-accent11: #4fd196;
  --t-accent-accent12: #d6f5e6;

  --t-accent-primary: #16412e;
  --t-accent-secondary: #16412e;
  --t-accent-tertiary: #12291e;
  --t-accent-quaternary: #0f1c16;
  --t-accent-accent3570: #268056;
  --t-accent-accent4060: #268056;

  --t-border-color-blue: #1f6545;
  --t-background-transparent-blue: rgba(47, 158, 104, 0.12);
  --t-color-blue: #2f9e68;
}

/*
 * Typography. Twenty ships Inter, pulled from fonts.googleapis.com by
 * index.html — for an EU self-host that is an avoidable third-party request;
 * self-host the woff2 files and point the family here.
 *
 * .light, .dark { --t-font-family: 'YourFont', Inter, sans-serif; }
 */

/*
 * MOBILE READABILITY — enlarge the record text on phones.
 *
 * On a phone the data columns (phone number, name, code, company …) render at
 * Twenty's small type tokens (~13–15px) and are hard to read. Twenty drives every
 * text size from --t-font-size-* custom properties, so scaling those scales the
 * whole UI's text in one place — no fragile per-component class targeting, and it
 * survives upgrades. Overridden on html.light / html.dark (specificity 0,1,1) so
 * it beats Twenty's own .light / .dark (0,1,0) declarations, same trick as the
 * accent tokens above.
 *
 * The client asked for "×2". The data-carrying sizes (xs/sm/md) are taken close
 * to that; headings (lg/xl/xxl) are scaled less so a long title cannot overflow
 * a narrow screen. Tune with one knob: multiply the rem values below. Verify on a
 * real device screenshot — a literal 2× on every token can overflow tight rows.
 */
@media (max-width: 820px) {
  html.light,
  html.dark {
    --t-font-size-xxs: 1.05rem; /* .625rem → ~1.68× */
    --t-font-size-xs:  1.45rem; /* .85rem  → ~1.70× */
    --t-font-size-sm:  1.70rem; /* .92rem  → ~1.85×  — main record/data text */
    --t-font-size-md:  1.80rem; /* 1rem    → ~1.80× */
    --t-font-size-lg:  1.95rem; /* 1.23rem → ~1.58× */
    --t-font-size-xl:  2.15rem; /* 1.54rem → ~1.40× */
    --t-font-size-xxl: 2.35rem; /* 1.85rem → ~1.27× */
  }

  /* The record table's text (cells, column headers, chips) is sized in px by
   * styled-components — NOT from the --t-font-size tokens above — so the token
   * bump alone does not reach it. Enlarge it explicitly. Verified against the
   * live DOM: these selectors are what actually carry the 13px data text. */
  html.light [data-testid="editable-cell-display-mode"],
  html.dark [data-testid="editable-cell-display-mode"],
  html.light [class*="header-cell"],
  html.dark [class*="header-cell"],
  html.light [data-testid="chip"],
  html.dark [data-testid="chip"] {
    font-size: 19px !important;
    line-height: 1.4 !important;
  }

  /* Bigger icons on phones. Twenty renders every icon as <svg class="tabler-icon">
   * (~14–16px), small under a finger. min-width/min-height too — width alone was
   * ignored on some icons (they kept 14px). */
  html.light svg.tabler-icon,
  html.dark svg.tabler-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}