/*
 * Tailwind's design tokens, as SCSS.
 *
 * The framework itself is not loaded, deliberately. Tailwind ships Preflight, a
 * global reset that strips `button`, `input`, `select`, `a`, `h1`-`h6` and the
 * list elements back to unstyled - and this stylesheet is loaded into wp-admin,
 * where those same elements are the admin's own chrome. Preflight inside
 * wp-admin is not a style choice, it is a broken sidebar and unreadable notices
 * on every screen the plugin registers. The play CDN also fails the plugin's
 * own CSP and adds a 3MB runtime for what is, in the end, a palette.
 *
 * So: the scale, not the framework. These are Tailwind's real values, and the
 * look everyone recognises comes from using them consistently - slate for every
 * neutral, a ring instead of a border, shadow-sm on cards, and the 4px spacing
 * grid underneath all of it.
 */

/* ---------------------------------------------------------------- colour -- */

/* Slate. Tailwind's neutral, faintly blue, which is why it looks cooler and
   more modern than the true greys this plugin used. */
$slate-50:  #F8FAFC;
$slate-100: #F1F5F9;
$slate-200: #E2E8F0;
$slate-300: #CBD5E1;
$slate-400: #94A3B8;
$slate-500: #64748B; /* 4.76:1 on white - the lightest that passes for text. */
$slate-600: #475569; /* 7.46:1 on white. */
$slate-700: #334155;
$slate-800: #1E293B;
$slate-900: #0F172A; /* 17.85:1 on white. */

/*
 * ZooMeet's own blue, not Tailwind's.
 *
 * The brand is #0B5CFF - registered as `brand` in tailwind.config.js and taken
 * from docs/brand/tokens/tailwind-brand.js. It is ZooMeet's own blue, no longer
 * the #085DF2 the plugin once shared with MeetingHub. An earlier pass here swapped
 * it for Tailwind's blue-600 (#2563EB) on the grounds that it was 'close enough',
 * which is how a product quietly loses its own colour. The ramp is built around
 * the brand instead, so every accent on every screen is the same blue: fills,
 * links and rings use $blue-500, hovers step to $blue-600.
 *
 * 50 to 200 are grounds, 300 and 400 are decoration only (they fail as text on
 * white), 500 and up carry text and fills.
 */
$blue-50:  #F5F9FF; /* The tint behind soft buttons. */
$blue-100: #EAF2FF;
$blue-200: #CFE3FF;
$blue-300: #8DB8FF; /* 2.01:1 on white - decoration only. */
$blue-400: #4C84FF; /* 3.47:1 on white - boundaries, never text. */
$blue-500: #0B5CFF; /* The brand itself. 5.26:1 against white, which is one
                        number in both directions - WCAG contrast is symmetric.
                        4.67:1 on blue-100, 4.03:1 on blue-200 (fails as text
                        there; use blue-700). */
$blue-600: #0A4FE0; /* brand-hover from tailwind.config.js. 6.55:1 with white. */
$blue-700: #0841C9; /* Brand text on a blue-50/100 wash: 7.62:1 / 7.14:1. */
$blue-800: #0B3FB0; /* 8.45:1 on blue-50. */
$blue-900: #0B1A33;
$brand-sky: #45B6FF; /* Accent on dark grounds only: 7.76:1 on blue-900. */

/* The Pro band's ink and accent, reused so one identity runs end to end. */
$brand-ink:  #0A1B33;
$brand-ink2: #06101F;
$brand-gold: #F0C25A;

/*
 * The plugin's texture: a 135-degree rule at ~2% white, from the Pro band.
 * Soft gradients read as decoration; a ruled pattern reads as a material, and
 * it is the one piece of surface treatment this product already owns.
 */
@mixin zmeet-ruled($alpha: 0.022) {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, $alpha) 0 1px,
        rgba(255, 255, 255, 0) 1px 7px
    );
}

$emerald-50:  #ECFDF5;
$emerald-600: #059669;
$emerald-700: #047857; /* 5.44:1 on white. */

$amber-50:  #FFFBEB;
$amber-100: #FEF3C7;
$amber-300: #FCD34D; /* The rule down the side of a watch-out block. */
$amber-700: #B45309;
$amber-800: #92400E; /* 6.94:1 on amber-100. */
$amber-900: #78350F; /* 11.6:1 on amber-50. */

/* ------------------------------------------------------------------ ring -- */

/*
 * `ring-1 ring-slate-900/5` is the single most recognisable thing about a
 * Tailwind surface: a hairline that is the page's own ink at 5% rather than a
 * grey borrowed from nowhere, so it reads as an edge rather than as a line.
 */
$ring: rgba(15, 23, 42, 0.06);
$ring-strong: rgba(15, 23, 42, 0.12);

/*
 * The edge of a control, which has to be seen rather than sensed.
 *
 * A text field on a white card is white on white: the ring is the only thing
 * that says a control is there, so WCAG 1.4.11 asks it for 3:1 against the
 * ground. $ring-strong measures 1.28:1 - it was never a contrast value, it was
 * a hairline, and it is still the right answer for the edge of a card, where
 * the surface and its shadow do the identifying.
 *
 * #8492a6 measures 3.16:1 on white and 3.02:1 on the slate-50 a row takes on
 * hover. It is not a new colour: all-meetings.css already uses this exact grey
 * as its control hover, so the palette gained nothing, only a second job.
 */
$ring-control: #8492a6;

/* --------------------------------------------------------------- radius -- */

$rounded-md: 6px;
$rounded-lg: 8px;
$rounded-xl: 12px;
$rounded-2xl: 16px;
$rounded-3xl: 24px;
$rounded-full: 9999px;

/* --------------------------------------------------------------- shadow -- */

/* Tailwind's real shadow stack: two layers, both very soft. The heavy single
   drop shadow is what makes a card look like it came from 2014. */
$shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
$shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
$shadow-md: 0 2px 4px -2px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.08);
$shadow-lg: 0 4px 6px -4px rgba(15, 23, 42, 0.08), 0 10px 20px -5px rgba(15, 23, 42, 0.12);
/*
 * DriveHub's surface vocabulary, with this plugin's ink.
 *
 * Its surfaces.js exists because cards were being written from scratch
 * wherever one was needed and no two agreed - which is what decides whether an
 * admin reads as one product or several. The same values, with slate in place
 * of DriveHub's green-cast ink, so the two plugins share a skeleton without
 * ZooMeet borrowing another brand's colour.
 *
 * The first layer is an inset hairline rather than a border: a soft shadow
 * alone goes mushy at the edge against a pale ground, and a real border adds a
 * second, harder edge on top of the ramp.
 */
$panel-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);

/* Panels are 14, controls 10 - DriveHub's RADIUS, and now this plugin's. */
$radius-panel: 14px;
$radius-control: 10px;

/*
 * How much air a card keeps between its own edge and the first and last thing
 * printed inside it.
 *
 * Named because four cards had drifted to four different answers - measured at
 * the ink rather than at the padding declaration, the four Zoom tabs came out
 * at 16, 22, 12 and 11 at the bottom. Nobody chose that; each card was padded
 * on its own and the gaps were never compared side by side, which is exactly
 * the kind of thing that reads as unfinished without ever being nameable.
 *
 * Slightly more below than above on purpose: a block of content sitting on an
 * edge needs a little more beneath it than over it to look centred.
 *
 * These are ink-to-edge targets, not padding values. Where a card's last child
 * carries padding of its own, subtract it - the comment at the use site says
 * what was subtracted and why.
 */
$card-ink-top: 18px;
$card-ink-bottom: 22px;

/*
 * How wide a settings column is allowed to get.
 *
 * Unconstrained, these rows ran the full 1420px page, which put a toggle some
 * 1300px from the label it belongs to: two separate columns of unrelated things
 * rather than one row you read across. A measure keeps the control beside its
 * label at any window size.
 */
$settings-measure: 960px;

/* The brand blue, so a primary button glows in the plugin's own colour. */
$shadow-blue: 0 1px 2px 0 rgba(11, 92, 255, 0.22), 0 4px 10px -3px rgba(11, 92, 255, 0.38);

/* ----------------------------------------------------------------- type -- */

/*
 * Tailwind's own font stack, which puts the system UI face first. The plugin
 * was asking for -apple-system on Windows, where it does not exist, and landing
 * on Segoe UI by accident rather than on purpose.
 */
$font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

/* text-xs through text-xl, with Tailwind's paired line heights. */
$text-xs: 12px;
$text-xs-lh: 16px;
$text-sm: 14px;
$text-sm-lh: 20px;
$text-base: 16px;
$text-base-lh: 24px;
$text-lg: 18px;
$text-lg-lh: 28px;
$text-xl: 20px;
$text-xl-lh: 28px;
$text-2xl: 24px;
$text-2xl-lh: 32px;

/* --------------------------------------------------------------- easing -- */

/* 150ms is Tailwind's `duration-150`, and the Doherty threshold says anything
   past ~260ms starts reading as the interface being slow rather than smooth. */
$ease: cubic-bezier(0.4, 0, 0.2, 1);
$dur: 150ms;

/*
 * The focus ring, once, so every control in the plugin wears the same one.
 * `ring-2 ring-blue-500 ring-offset-2` - the offset is what keeps it legible on
 * a filled button, where a flush ring disappears into the fill.
 */
@mixin tw-ring-focus($color: $blue-500) {
    outline: 2px solid $color;
    outline-offset: 2px;
}